vue中.sync修饰符
当一个属性传递给子组件后，子组件需要修改时，可以使用.sync修饰符
父组件中使用.sync修饰符
<template>
<div class="warp">
父组件的msg值：{{msg}}
<!-- <asyncSon :msg="msg" @update:msg="myFn"></asyncSon> -->
<!-- 当一个属性传递给子组件后，子组件需要修改时，可以使用.sync修饰符 -->
<!-- 相当于下面简写写法（如 elementUI的 dialog组件） -->
<asyncSon :msg.sync="msg"/>
</div>
</template>
<script>
import asyncSon from "@/view/asyncSon";
export default {
name: "async",
components: { asyncSon },
data: _ => ({
msg: "哈哈哈"
}),
methods: {
myFn(val) {
this.msg = val;
}
}
};
</script>子组件使用’update:修改的属性值’来$emit父组件的值
<template>
<div class="warp">
<p>子组件显示的msg值：{{msg}}</p>
<button @click="fn">修改父组件的msg值</button>
</div>
</template>
<script>
export default {
name: "asyncSon",
props: {
msg: {
type: String,
default: ""
}
},
methods:{
fn(){
// 注意：必须使用'update:修改的属性值'来命名,才能使用 .sync修饰符
this.$emit('update:msg','呵呵呵')
}
}
};
</script>
