Vue3组件同步更新 update 方法 和Vue2.sync的用法
有一篇文章我用到了这个update来向父组组件传参 那么这个是干啥的 ,其实通俗易懂一点 他就是用来同步更新父组件的值 不需要再用父组件来调用自定义事件 实例:vue3版本<template><div class=""><p @click="open">请你点击</p><zh-drag v-model:show="show" title="头部
·
有一篇文章我用到了这个update来向父组组件传参 那么这个是干啥的 ,其实通俗易懂一点 他就是用来同步更新父组件的值 不需要再用父组件来调用自定义事件 实例:
vue3版本
<template>
<div class="">
<p @click="open">请你点击</p>
<zh-drag v-model:show="show" title="头部">
<template #center> 中间 </template>
<template #floor>
<button @click="show = false">取消</button>
<button @click="show = false">确定</button>
</template>
</zh-drag>
</div>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
setup() {
let state = reactive({
show: false,
});
let open = () => {
state.show = true;
};
return {
open,
...toRefs(state),
};
},
mounted() {},
methods: {},
components: {},
};
</script>
注意我传组件的使用 用的是v-model:show=“show”
而当你的子组件要改变父组件值的时候你就可以再子组件这个用update来传
这样你就会发现 你父组件并没有设置show的自定义事件 但是你父组件show的值却更新了 这就是同步更新的好处 不需要你再手动来添加自定义事件
vue2
你只要给show来一个修饰符.sync 就可以
就可以 当然我这个是vue3 所以会报错 vue2不会 子组件一样用update来传 就可以达到同步更新
感谢观看文章 祝你技术越来越good!!
更多推荐
所有评论(0)