Компоненты Vue «родитель-потомок» как передать значение двусторонней привязки

внешний интерфейс Vue.js
Компоненты Vue «родитель-потомок» как передать значение двусторонней привязки

предисловие

Двусторонняя привязка между родительским и дочерним компонентами очень проста, но многие люди могут начать использовать Vue 2+, могут не знать, как привязать двустороннюю привязку, конечно, самая простая двусторонняя привязка (один файл) элемент формыv-model, Например<input type="text" />Он будет реагировать на элемент формыvalueсвойств, когда текст поля ввода изменится, он будетvalueзначение, переданноеv-modelСвязанная переменная, если она установлена ​​одновременноv-modelа такжеvalue,valueНедействительное свойство.

Настраиваемая двунаправленность для родительских и дочерних компонентовv-model

Когда несколько DOM инкапсулированы в компоненты, когда дочерний компонент используется в родительском компоненте, его нельзя использовать на метке дочернего компонента.v-model, поскольку метка дочернего компонента не является элементом формы, в настоящее время нам нужно настроить то, что мы хотимv-modelправило.

<!-- children.vue -->
<template>
    <h1>{{ msg }}</h1>
</template>
<script>

export default{
    model:{
        prop:'msg',//这个字段，是指父组件设置 v-model 时，将变量值传给子组件的 msg
        event:'parent-event'//这个字段，是指父组件监听 parent-event 事件
    },
    props:{
        msg:String //此处必须定义和model的prop相同的props，因为v-model会传值给子组件
    },
    mounted(){
    //这里模拟异步将msg传到父组件v-model，实现双向控制
        setTimeout(_=>{
            let some = '3秒后出现的某个值';//子组件自己的某个值
            this.$emit('parent-event',some);
            //将这个值通过 emit 触发parent-event，将some传递给父组件的v-model绑定的变量
        },3000);
    }
}
</script>

<!-- parent.vue -->
<template>
    <children v-model="parentMsg"></children>
</template>
<script>
import children from 'path/to/children.vue';
export default{
    components:{
        children
    },
    data(){
        return{
            parentMsg:'test'
        }
    },
    watch:{
        parentMsg(newV,oldV){
            console.log(newV,oldV);
            //三秒后控制台会输出
            //'3秒后出现的某个值','test'
        }
    }
}
</script>

Вы изучаете настройку компонентовv-modelВсе же ? Если это нормальный элемент формы, то же самое, слушать формуinputилиchangeсобытие в реальном времениvalueилиcheckedпройти через$emitПросто передайте это.

Пользовательские множественные двунаправленные значения для родительских и дочерних компонентов

В приведенном выше примере реализована двусторонняя привязка одного значения свойства.Когда требования компонента требуют сложных операций и требуется несколько двусторонних значений, как это реализуется? Здесь нам нужно использовать те, которые были заброшены vue раньше, а затем возвращены..syncмодификатор.

На самом деле это соотношениеv-modelпроще

<!-- children.vue -->
<template>
    <h1>{{ msg }}</h1>
</template>
<script>

export default{
    props:{
        msg:String
    },
    mounted(){
    //这里模拟异步将msg传到父组件v-model，实现双向控制
        setTimeout(_=>{
            let some = '3秒后出现的某个值';//子组件自己的某个值
            this.$emit('update:msg',some);
            //将这个值通过 emit
            //update为固定字段，通过冒号连接双向绑定的msg，将some传递给父组件的v-model绑定的变量
        },3000);
    }
}
</script>

<!-- parent.vue -->
<template>
    <children :msg.sync="parentMsg"></children>
    <!-- 此处只需在平时常用的单向传值上加上.sync修饰符 -->
</template>
<script>
import children from 'path/to/children.vue';
export default{
    components:{
        children
    },
    data(){
        return{
            parentMsg:'test'
        }
    },
    watch:{
        parentMsg(newV,oldV){
            console.log(newV,oldV);
            //三秒后控制台会输出
            //'3秒后出现的某个值','test'
        }
    }
}
</script>

Обратите внимание, хотя добавление.syncВы можете связываться в обоих направлениях, но вам все равно придется полагаться на подкомпоненты.$emitдля запускаupdate:prop名Реализуйте двухсторонний поток данных, изменяя значение переменного значения родительского компонента. Если свойство PROP непосредственно назначается, ошибка все равно будет происходить.

Фактически,.syncМодификатор — это сокращение, которое делает одну вещь

<template>
    <children :msg.sync="parentMsg"></children>
    <!-- 等价于 -->
    <children :msg="parentMsg" @update:msg="parentMsg = $event"></children>
    <!-- 这里的$event就是子组件$emit传递的参数 -->
</template>

Когда вам нужно передать все свойства объекта через.syncКогда передается двунаправленный поток данных, его можно записать более простым способом.

<template>
    <children :.sync="obj"></children>
</template>
<script>
export default{
    components:{
        children
    },
    data(){
        return{
            obj:{
                parentMsg:'test'
            }
        }
    }
}
</script>

Когда используется этот способ записи, все свойства в объекте obj будут переданы дочернему компоненту через независимые реквизиты, и соответствующиеupdate:, соответствующие реквизиты также должны быть объявлены в дочернем компоненте.

Суммировать

В компоненте «родитель-потомок» использование двунаправленного потока данных может дать хорошие результаты и опыт разработки в некоторых случаях, но его следует использовать умеренно, поскольку двунаправленный поток данных увеличит нагрузку на последующее обслуживание проекта.

Советы: если вы знаете, как делиться, вы пойдете дальше.

Категории