vue实现父子间的双向数据绑定的三种方法

小咪咪 2022-05-18 02:25 175阅读 0赞

主要是通过一个小例子用三种不同的方式实现，进而来介绍父子间的双向数据绑定

css样式

第一种：父——>子通过props传递数据，子——>父通过自定义事件通信

html

<div class="box">
        <p :class="color">我是红色字体</p>
        <btn :color="color" @change="changeC"></btn>
    </div>

js+vue

实现思路：父向子传递数据，通过props，然后子改变父传过来的值，是通过$emit()实现的

这个是最传统的实现方式，也是比较复杂的一种了当点击按钮的时候，我们通过$emit('自定义事件名',val)来通知父级改变数据

父级再通过自定义事件去改变父级的数据

这里的$emit()的第二个参数是我们传递给父级的，注意：即便我们在$emit()的时候进行了传参，但在组件中使用的时候也不要直接传参，只需我们在父级的methods中使用的时候传参即可，即@change="changeC(val)"这种写法是错误的，正确写法为：@change="changeC"

2、通过v-model实现父子间双向数据绑定

html:

<div class="box">
        <p :class="color">我是红色字体</p>
        <btn :color="color" v-model="color"></btn>
    </div>

js+vue:

知识点补充：可看官方文档：[自定义组件][Link 1]

一个组件上的v-model默认会利用名为value的 prop 和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将value特性用于不同的目的，model选项可以用来避免这样的冲突：如下所示

model: {
        prop: 'checked',
        event: 'change'
      }

实现思路：利用v-model 实现双向数据绑定，即把父中需要通过子改变的变量给v-model，在子组件中如果我们想要使用父中的值，value即可代表这个值，子组件想要改变父中的值，也是通过$emit()，不过这里的事件要使用固定的'input'，通过第二个参数来为父赋新值

3、使用.sync修饰符实现父子间的双向数据绑定

html:

<div class="box">
        <p :class="color">我是红色字体</p>
        <btn :color="color" :cge-color.sync="color"></btn>
    </div>

js+vue

知识点补充：官方文档：[.sync][]

实现思路：这个实现父子间的双向数据绑定主要是通过.sync修饰符

把我们需要通过子改变父的变量动态绑定后传给子组件    :cge-color.sync="color"

在子组件中通过props接收   props:\['cgeColor'\]

子组件想要改变父传过来的值，也是通过$emit，不过这里的正确写法是:$emit('update:cgeColor',val),注意update是不可少的哦，和v-model一样第二个参数是用来为父赋新值

上面的案例用三种不同的方式实现父子间的双向数据绑定，第一种相对第二和第三种方式稍微有点复杂

ok，写到这里了，因为是个人组织的语言，可能有些地方用词不妥，如果您有发现欢迎指正哦

[Link 1]: https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
[.sync]: https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

vue实现父子间的双向数据绑定的三种方法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue的双向数据绑定怎么实现

相关 vue数据双向绑定

相关 Vue 数据双向绑定

相关 vue实现数据双向绑定

相关 vue 父子组件双向绑定传值的实现

相关 javascript实现数据双向绑定的三种方式

相关 Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

相关 vue实现父子间的双向数据绑定的三种方法

相关 vue父子组件数据双向绑定

相关 Vue项目之父子组件实现双向绑定