首页 > 编程知识 正文

vue如何在组件内部实现双向绑定,不用vmodel实现数据双向绑定

时间:2023-05-06 16:26:12 阅读:239207 作者:2998

核心点:
1.父组件啥也不用干只需要绑定v-model值
2.子组件接收绑定的props属性必须为value
3.子组件data中必须定义一个属性接收value的值
4.子组件watch监听value的值同步给定义的属性
5.子组件watch监听定义属性的值通过$emit('input')同步给父组件

父组件 <template><div><p>父组件当前的值:{{num}}</p> <button @click="btnClick">减少</button> <child v-modal="num" /></div></template><script>import Child from './child.vue';export default {name: 'parent',components: {Child }, data() { return { num: 0 }; }, methods: { btnClick() { this.num--; }, },};</script> 子组件 <template><div><p>子组件当前的值:{{num}}</p> <button @click="btnClick">增加</button> </div></template><script>export default {name: 'child', props: { value: Number, }, data() { return { num: 0 }; }, watch: { value(val) { this.num = val; }, num(num) { this.$emit('input', num); }, }, methods: { btnClick() { this.num++; }, },};</script>

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。