vue中.sync修饰符与自定义组件的v-model的使用

.sync修饰符

有时我们需要父组件向子组件传值，并且子组件要修改父组件中的值是，我们一般会这样写

//父组件
<template>
    //子组件修改值 父组件注册自定义事件 传过来的参数通过$event来获取
  <div :title='title' @update-title='title = $event'>
    {{title}}
   </div>
</template>

<script>
export default {
  data () {
    return {
        title：’父组件的值‘
    }
  }
}
</script>

<style lang='less' scoped>
</style>

//子组件
<template>
  <button @click="$emit('update-title','子组件修改的值')">
		// 如果我们要修改父组件中的值 1.发送一个通知给父组件 2.父组件接到通知去修改自己的值
    //我们需要把父组件的title放到组件中使用
		{{title}}
   </button>
</template>

<script>
export default {
  props:['title']
  data () {
    return {
    }
  }
}
</script>

<style lang='less' scoped>
</style>

由于父向子传值 子组件也要修改父组件的值vue提供了一个修饰符可以更好的简化代码（.sync）

//父组件
<template>
    //子组件修改值 父组件注册自定义事件 传过来的参数通过$event来获取
  <div :title.sync='title'>
    {{title}}
   </div>
</template>

<script>
export default {
  data () {
    return {
        title：'父组件的值'
    }
  }
}
</script>

<style lang='less' scoped>
</style>

//子组件
<template>
  <button @click="$emit('update:title','子组件修改的值')">
    //我们需要把父组件的title放到组件中使用
		{{title}}
   </button>
</template>

<script>
export default {
  props:['title']
  data () {
    return {
    }
  }
}
</script>

<style lang='less' scoped>
</style>

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model

$emit('update:要传入的值')是固定写法

自定义组件的v-model

之前我们使用v-model指令用来做数据的双向绑定

由于父向子传值 子组件也要修改父组件的值vue除了.sync修饰符可以更好的简化代码，另一个就是自定义组件v-model

自定义组件v-model提供了默认的props，通过value来绑定数据源，通过监听input事件来向父组件传值

//父组件
<template>
    //子组件修改值 父组件注册自定义事件 传过来的参数通过$event来获取
  <div :value='title' @input='title=$event'>
    {{title}}
   </div>
</template>

<script>
export default {
  data () {
    return {
         title：'父组件的值'
    }
  }
}
</script>

<style lang='less' scoped>
</style>

//子组件
<template>
  <button @click="$emit('input','子组件修改的值')">
		// 如果我们要修改父组件中的值 1.发送一个通知给父组件 2.父组件接到通知去修改自己的值
    //我们需要把父组件的title放到组件中使用
		{{title}}
   </button>
</template>

<script>
export default {
  props:['title']
  data () {
    return {
    }
  }
}
</script>

<style lang='less' scoped>
</style>

其实value 和input是默认情况，当我们可以修改名称,通过model属性来修改

model: { prop: ‘checked’, event: ‘change’ }

//父组件
<template>
    //子组件修改值 父组件注册自定义事件 传过来的参数通过$event来获取
  <div :title='title' @update-title='title=$event'>
    {{title}}
   </div>
</template>

<script>
export default {
  data () {
    return {
         title：'父组件的值'
    }
  }
}
</script>

<style lang='less' scoped>
</style>

//子组件
<template>
  <button @click="$emit('update-title','子组件修改的值')">
		// 如果我们要修改父组件中的值 1.发送一个通知给父组件 2.父组件接到通知去修改自己的值
    //我们需要把父组件的title放到组件中使用
		{{title}}
   </button>
</template>

<script>
export default {
//修改名称
  model: {
    prop: 'title',
    event: 'update-title'
  },
  props:['title']
  data () {
    return {
    }
  }
}
</script>

<style lang='less' scoped>
</style>

注意

自定义组件的v-model与.sync不同的区别是

• v-model一个组件只能绑定一次
• .sync可以绑定多个