Vue组件中利用.sync修饰符实现对prop进行双向数据绑定

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。

所以官方推荐以update:my-prop-name 的模式触发事件取而代之

为了好理解,我写了一个很简单的小例子:(单击输入框,显示或隐藏下面的box)

Vue组件中利用.sync修饰符实现对prop进行双向数据绑定_第1张图片

下面是完整的代码:




    
    Title
    
    


核心代码:

    Vue.component('costum-show',{
        props:['isShow'],
        template:`
             
`, methods:{ showHandle(){ this.$emit("update:isShow",!this.isShow); } } })

 

你可能感兴趣的:(vue)