【vue】使用.sync 实现数据的双向绑定
在 vue 中想要在父子组件中实现数据的双向绑定(子组件能感知父组件的值的修改,父组件能感知子组件的值的修改)有三种方式:
- v-model
- 动态绑定数据+显示事件监听
- .sync
三种方式各有千秋,v-model 只能绑定一个对象,动态绑定数据+显示事件监听略显麻烦,.sync 相对方便简单一点。(个人直观感受,详细差异有待挖掘)
.sync 的使用
子组件 mySelect.vue 代码:
<template>
<el-select v-model="newFood" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
props: {
food: {
type: String,
default: "",
},
},
data() {
return {
options: [
{
value: "黄金糕",
},
{
value: "双皮奶",
},
],
};
},
computed: {
newFood: {
get() {
return this.food;
},
set(newValue) {
this.$emit("update:food", newValue);
},
},
},
};
</script>
父组件代码:
<template>
<div id="example">
<my-select :food.sync="food"></my-select>
<span>我选择的食物是:{{ food }}</span>
<div>
<el-button @click="handleClick" type="primary">我要黄金糕</el-button>
</div>
</div>
</template>
<script>
import MySelect from "./mySelect.vue";
export default {
components: { MySelect },
data() {
return {
food: "",
};
},
methods: {
handleClick() {
this.food = "黄金糕";
},
},
};
</script>
运行结果:
父组件的 food 属性和子组 mySelect 的选择框内容是联动的,相互影响的。
子组件影响父组件(通过子组件 mySelect 选择食物)运行结果:
父影响子组件(点击“我要黄金糕”)运行结果: