javascript - Parent to Child interaction in Vue - Stack Overflow

admin管理员组

文章数量:1317909

I would like to know how to make a parent-child interaction in Vue.

Let me give you a small example to explain it.

parent.vue file

<template>
    <div>
        <input @input="validate" type="text" />
        <child-ponent></child-ponent>
    </div>
</template>

<script>
    export default {
        methods: {
            validate(event) {
                if (event.target.value == 'hello') {
                    // make my child ponent to do something
                }
            }
        }
    }
</script>

child.vue file

<script>
    export default {
        methods: {
            someFunction() {
                alert('Success');
            }
        }
    }
</script>

Note: This is just an example. My actual situation is little plicated to explain here

In this example, I would like to know how to trigger the function someFunction() in the child ponent when the if condition in the parent ponent bees true.

I would like to know how to make a parent-child interaction in Vue.

Let me give you a small example to explain it.

parent.vue file

<template>
    <div>
        <input @input="validate" type="text" />
        <child-ponent></child-ponent>
    </div>
</template>

<script>
    export default {
        methods: {
            validate(event) {
                if (event.target.value == 'hello') {
                    // make my child ponent to do something
                }
            }
        }
    }
</script>

child.vue file

<script>
    export default {
        methods: {
            someFunction() {
                alert('Success');
            }
        }
    }
</script>

Note: This is just an example. My actual situation is little plicated to explain here

In this example, I would like to know how to trigger the function someFunction() in the child ponent when the if condition in the parent ponent bees true.

• javascript
• vue.js
• ponents
• interaction

Share Improve this question Follow asked Nov 5, 2018 at 7:26 ConorConor 2,56311 gold badge1515 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

you can use vue event bus to trigger events from different ponents.

First, initialize Vue.prototype.$bus = new Vue(); in your main.js file.

let your parent ponent send events:

validate(event) {
    if (event.target.value == 'hello') {
        this.$bus.$emit('throw', 'Hi')
    }
}

then let your child ponent listen:

created() {
    this.$bus.$on('throw', ($event) => {
        console.log($event)  //shows 'Hi'
    })
}

You could assign a ref to your child ponent and then use $refs to call the method on the child ponent directly.

<template>
    <div>
        <input @input="validate" type="text" />
        <child-ponent ref="child"></child-ponent>
    </div>
</template>

<script>
    export default {
        methods: {
            validate(event) {
                if (event.target.value == 'hello') {
                    this.$refs.child.someFunction();
                }
            }
        }
    }
</script>

Vue Docs Ref

Short Answer: You can use props and watch/puted properties for that purpose.

Parent Component:

As per your case, you can define foo as your data property in parent-ponent and bind foo to input element using v-model (the remended way) OR keep it the same as you have already done (listening to the input event) and once, it is equal to some value hello (in your case) it changes the foo to true.

As soon as foo value changes, Vue reactivity es into play and, it informs/re-renders the child ponent.

Child Component:

Now, here, you can watch for changes in the prop and once it turns true you can call a function/method (someFunction).

Here is the fiddle for your understanding

本文标签： javascriptParent to Child interaction in VueStack Overflow