前几天写了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可以有多个。
- 格式不同。