Взаимодействие родителей и детей в Vue - PullRequest
Новая
       20

Взаимодействие родителей и детей в Vue

0 голосов
/ 05 ноября 2018

Я хотел бы знать, как сделать взаимодействие родитель-ребенок в Vue.

Позвольте мне привести небольшой пример, чтобы объяснить это.

parent.vue файл 

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

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

child.vue file 

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

Примечание : Это всего лишь пример. Моя фактическая ситуация немного сложна, чтобы объяснить здесь

В этом примере я хотел бы знать, как вызвать функцию someFunction() в дочернем компоненте, когда условие if в родительском компоненте становится истинным.

Ответы [ 3 ]

0 голосов
/ 05 ноября 2018

Краткий ответ: Вы можете использовать реквизиты и смотреть / вычислять свойства для этой цели.

Родительский компонент:

В вашем случае вы можете определить foo как свойство data в родительском компоненте и связать foo с элементом ввода, используя v-model ( рекомендуемый способ ) OR оставьте его таким же, как вы уже сделали ( прослушивание входного события ), и один раз оно будет равно некоторому значению привет (в вашем случае) изменяет foo на true.

Как только значение foo изменяется, в игру вступает реактивность Vue, и она информирует / повторно отображает дочерний компонент.

Дочерний компонент:

Теперь здесь вы можете наблюдать за изменениями в опоре и, когда она поворачивается true, вы можете вызывать функцию / метод (someFunction).

Вот скрипка для вашего понимания

0 голосов
/ 05 ноября 2018

вы можете использовать шину событий vue для запуска событий из разных компонентов.

Сначала инициализируйте Vue.prototype.$bus = new Vue(); в файле main.js.

пусть ваш родительский компонент отправляет события: 

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

тогда пусть ваш дочерний компонент слушает: 

created() {
    this.$bus.$on('throw', ($event) => {
        console.log($event)  //shows 'Hi'
    })
}
0 голосов
/ 05 ноября 2018

Вы можете присвоить ref своему дочернему компоненту, а затем использовать $refs для непосредственного вызова метода дочернего компонента. 

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

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

Vue Docs Ref

...