vue.js - vue 2.3后绐组件绑定的属性添加.sync后，会报warn警告

问题描述

问 题

<div id="app">
    <button @click="Visible=true">aaa</button>   
    <child :visible.sync="Visible"></child>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script>
    Vue.component('child', {
        props: ['visible'],
        template: '<div v-show="visible"><button @click="visible=false">111</button></div>',
    });
    var vm = new Vue({
        el: '#app',
        data: {
            Visible: false
        }
    });
</script>

页面初始化时点击可以正常显示，隐藏，再点就报这个错误了，求大佬指导

目前用watch 配合$emit 改父中值 请问还有没有更好的方法 求指点

解决方案

注意，.sync确实是双向绑定，但是你仍然不能直接修改变量：

错误的写法
Visible=true

正确应该是触发一个update事件

this.$emt('update:Visible',true)

这篇关于vue.js - vue 2.3后绐组件绑定的属性添加.sync后，会报warn警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！