vue组件双向通信v-model和.sync

前几天写了vue组件通信中的几种方法看这里vue组件各种通信方式 今天补充:

v-model双向绑定传值

1.v-model原理:绑定value属性,监听input事件

<Child :value="num" @input='val=>num=val'>

// 父组件
<template>
    <div>
        <h2>父组件的值{{num}}</h2>
       <Child v-model="num"></Child> 
       <!-- v-model等价于以下写法 -->
       <!-- <Child :value="num" @input='val=>num=val'></Child> -->
    </div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
  data() {
    return {
      num: 10,
    };
  },
  components: {
    Child,
  },
};
</script>

//子组件
<template>
  <div>
      <h3>子组件接收的值{{value}}</h3>
      <button @click='change'>点击修改</button>
  </div>
</template>
<script>
export default {
     props:{
            value:{ // 这里的值的名字一定要叫value 因为v-modle双向绑定的就是value属性
                type:Number,
                required:true,
            }
        },
        methods: {
            change(){
                // $emit触发input事件修改接收的值 父组件中跟着变化
                this.$emit('input',this.value+1)
            }
        }
}
</script>
复制代码

2.点击子组件按钮修改接收的值 父子组件同时变化:this.$emit('input',this.value+1)

效果:

3.小结:

父子组件中使用v-model通信 ,子组件用props接收传递的值value(一定要叫value) 在子组件中通过$emit方法触发input事件 实现父组件子组件值同时变化

.sync双向绑定传值

1.一般的父向子传值:<Child :a="num" :b="num2"></Child> 子组件中props接收

2.使用.sync父向子传值: <Child :a.sync="num" .b.sync="num2"></Child>

3.sync传值原理:

<Child 
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val">
  </Child>
复制代码

相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

5.子组件使用this.$emit('update:a',this.value+1)修改接收的值 父子组件双向变化

//父组件
<template>
    <div>
        <h2>父组件的值num-->{{num}}---num1-->{{num1}}</h2>
       <Child :a.sync="num " :b.sync='num1'></Child> 
    </div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
  data() {
    return {
      num: 10,
      num1:20
    };
  },
  components: {
    Child,
  },
};
</script>

//子组件
<template>
  <div>
      <h3>子组件接收的值a:{{a}}</h3>
      <h3>子组件接收的值b:{{b}}</h3>
      <button @click='change'>点击修改</button>
  </div>
</template>
<script>
export default {
     props:{
            a:{
                type:Number,
                required:true,
            },
            b:{
                type:Number,
                required:true,
            }
        },
        methods: {
            change(){
                // $emit触发update事件修改接收的值 父组件中跟着变化
                this.$emit('update:a',this.a+1)
                this.$emit('update:b',this.b+1)
            }
        }
}
</script>
复制代码

效果:

小结:

父子组件中使用.sync通信 ,子组件用props接收传递的值(绑定的属性名自己决定) 在子组件中通过$emit方法触发'update:属性名'事件 实现父组件子组件值同时变化

$emit('update:属性名',要修改的值)
复制代码

总结:v-model和.sync实现双向绑定的区别:

• 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。

• 区别点：

  • 格式不同。 v-model="num", :num.sync="num"
  • v-model： @input + value
  • :num.sync: @update:num
  • v-model只能用一次；.sync可以有多个。