vue.sync修飾符與$emit(update:xxx)

。

場景：需要封裝一個基於element-ui的dialog彈框；發現關閉彈框時，父組件的值沒變化，導致再次出發dialog彈框，而彈框沒出現。於是想辦法，讓父組件的attrs的值通過子組件出發改變；

想過用v-mode，但是這需要給組件多加一個屬性，我想讓這個組件像用element-ui一樣使用，不多加一個自定義的屬性，於是就查到了sync修飾符（自定義事件）

下面是一個小組件：

<template>
    <div>
        <h1>{{$attrs.visible}}</h1>
        <el-button type="primary" @click="changeParentBalue">改變父組件的值</el-button>
    </div>
</template>

<script>
export default {
    methods:{
        changeParentBalue(){
            this.$emit("update:visible",Math.random()*10)
        }
    }
}
</script>

父組件調用：

<template>
  <div>
    使用.sync修飾符,即
    <h1>{{value}}</h1>
    <update :visible.sync="value"></update>
    <hr>
    與不使用.sync，即
    <h1>{{value1}}</h1>
    <update v-bind:visible="value1" v-on:update:visible="value1=$event"></update>
  </div>
</template>

<script>
export default {
  components:{
    update:() => import("@/components/update")
  },
  data(){
    return{
      value:"1",
      value1:"1",
    }
  },
}
</script>

效果：

 

 

 

 

 

 

。