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

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

css样式

    <style>
        .red{color:red;}
        .yellow{color:yellow;}
        .green{color:green;}
    </style>

第一种：父——>子通过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"

<script>
    Vue.component('btn',{
        props:['color'],
        data(){
            return {
                val:''
            }
        },
        methods:{
            changeColor(val){
                this.$emit('change',val)
            }
        },
        template:`
<div>
<input type="text" v-model="val" placeholder="输入要改变的颜色"/>
 <button @click="changeColor(val)">改变颜色</button>
</div>

        `
    })
    new Vue({
        el:'.box',
        data:{
            color:'red'
        },
        methods:{
            changeC(val){
                this.color = val
            }
        }
    })
</script>

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

html:

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

js+vue:

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

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

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

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

<script>
    Vue.component('btn',{
        data(){
            return {
                val:''
            }
        },
        methods:{
            changeColor(val){
                this.$emit('input',val)
            }
        },
        template:`
<div>
<input type="text" v-model="val" placeholder="输入要改变的颜色"/>
 <button @click="changeColor(val)">改变颜色</button>
</div>

        `
    })
    new Vue({
        el:'.box',
        data:{
            color:'red'
        }
    })
</script>

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一样第二个参数是用来为父赋新值

<script>
    Vue.component('btn',{
        props:['cgeColor'],
        data(){
            return {
                val:''
            }
        },
        methods:{
            changeColor(val){
                this.$emit('update:cgeColor',val)
            }
        },
        template:`
<div>
<input type="text" v-model="val" placeholder="输入要改变的颜色"/>
 <button @click="changeColor(val)">改变颜色</button>
</div>

        `
    })
    new Vue({
        el:'.box',
        data:{
            color:'red'
        }
    })
</script>

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

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

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

猜你喜欢