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

3 Answers 3

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