.sync修饰符

.sync修饰符

1.作用 可以实现子组件与父组件数据**的双向绑定，简化代码

简单理解:子组件可以修改父组件传过来的props值

2.场景 封装弹框类的基础组件， visible属性true显示false隐藏

特点:prop属性名，可以自定义，非固定为value

3.本质 .sync修饰符就是:属性名和@update:属性名合写

.sync(有语义)

:属性.sync='数据' 相当于

：属性=“数据“ + @update：属性="数据=$event"

<base-select :selectId="selectId"@update:selectId="selectId = $event" >

相当于

<base-select :selectId.sync="selectId"/>

v-model中的value不具有语义，要使其有语义写成 ：属性名=" 数据" @update:属性名=" 数据"

来替换原来的 ：属性名="数据" @input="数据"

App.vue

<template>
  <div>
    <h1>大标题</h1>
    <!-- <header-comp :projectId="selectId" @changeId="selectId=$event"></header-comp> -->
<header-comp :selectId="selectId" @update:selectId="selectId=$event"></header-comp>
  </div>
</template>

<script>
import HeaderComp from './components/HeaderComp.vue'

export default {
  components: {
    HeaderComp
  },
  data () {
    return {
      selectId: '2'

    }
  }

}
</script>

<style>

</style>

HeaderComp.vue

<template>
  <div class="fa">
    <h2>h2文章二级标题</h2>
<select name="" id="" :value="selectId"  @change="handleChange">
  <option value="1">html</option>
  <option value="2">css</option>
  <option value="3">js</option>
</select>
  </div>
</template>

<script>

export default {
  props: {
    selectId: String
  },
  methods: {
    handleChange (e) {
      console.log(e.target.value)
      this.$emit('update:selectId', e.target.value)
    }
  }

}
</script>

<style>

</style>

用.sync修饰符简化

只需将App.vue中的子组件标签写成

 <header-comp :selectId.sync="selectId"></header-comp>