[JavaScript知识库]Vue-.sync修饰符

作用

用来修改父组件传递过来的参数props，在子组件中改变父组件状态的时候
实际上是对props的值做了一个双向绑定

示例

首先.sync实际上是一个语法糖,下面我们分别展示.sync和未使用语法糖的效果
使用.sync

父组件
	<div class="details">
        <h1>{{message}}</h1>
        <button @click='changeBn'>显示/隐藏</button>
        <item 
        :isShow.sync='isTrue'
        />
	</div>
	data(){
        return{
            isTrue:'true'
        }
    }
    methods:{
    changeBn(){
            this.isTrue=!this.isTrue
        }
    }
子组件item
   <div class="item" v-if='isShow'>
       <button @click='closeChild'>子组件的按钮显示隐藏</button>
    <p>我是子组件</p>
   </div>

   props:['isShow']
   methods:{
    closeChild(){
        this.$emit('update:isShow',false)
        //这里我们必须在事件执行名称前加上update：的前缀才能正确触发事件。
    }
   }

不使用语法糖

//父组件
   <div class="details">
        <h1>{{message}}</h1>
        <button @click='changeBn'>切换按钮</button>
        <item
        :isShow="isTrue"
        @update:isShow='value=>isTrue=value'//这里是个回调函数
        />
    </div>
    data(){
        return{
            isTrue:'true'
        }
    }
    methods:{
        changeBn(){
            this.True=!this.isTrue
        }
    }
//子组件
   <div class="item" v-if='isShow'>
       <button @click='closeChild'>子组件的按钮</button>
       <p>我是子组件</p>
   </div>
   props:['isShow']
   methods:{
    closeChild(){
        this.$emit('update:isShow',false)
    }
   }

点击实现了隐藏