Vue 中的 sync 修饰符
2019-03-19 本文已影响0人
雪映月圆
子组件修改父组件中的某个属性值，正常写法
<body>
<div id="app">
<child :msg="msg" @change="doChange"></child>
</div>
<script src="./js/vue.js"></script>
<script>
// 子组件的配置对象
const child = {
template: `
<div>
<h1>{{msg}}</h1>
<button @click="change">点击修改h1的内容</button>
</div>
`,
props: {
msg: String
},
methods: {
change: function() {
this.$emit("change", "这是被子组件修改后的内容");
}
}
};
// 注册子组件
Vue.component("child", child);
const vm = new Vue({
el: "#app",
data: {
msg: "这是父组件中的数据"
},
methods: {
doChange: function(data) {
this.msg = data;
}
}
});
</script>
</body>
使用sync修饰符的写法
操作步骤:
- 子组件中: this.$emit("update:msg", params); //此处触发的事件名称必须是 "update:变量名"
- 在父组件的组件模板中，找到对应的子组件标签，把其中的 :msg="msg" 改写为 :msg.sync="msg"
- 注意: 此处的 "update:msg
<body>
<div id="app">
<child :msg.sync="msg"></child>
</div>
<script src="./js/vue.js"></script>
<script>
// 子组件的配置对象
const child = {
template: `
<div>
<h1>{{msg}}</h1>
<button @click="change">点击修改h1的内容</button>
</div>
`,
props: {
msg: String
},
methods: {
change: function() {
this.$emit("update:msg", "这是被子组件修改后的内容");
}
}
};
// 注册子组件
Vue.component("child", child);
const vm = new Vue({
el: "#app",
data: {
msg: "这是父组件中的数据"
}
});
</script>
</body>
