vue 中 v-model 和 .sync修饰符

v-model  

<input v-model="searchText"> 

等价于
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
当用在组件上时，v-model 则会这样：
<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

//父组件
 <vModel v-model="textValue"  @focus="showValue" class="username-input" placeholder="Enter your username" :a='1'></vModel>
//子组件
<template>
        <input type="text" v-bind='$attrs' :value="value" @input="input">
　　 <input :value="value" @change="change">
</template>
<script>
　　
inheritAttrs: false, //当在子组件中加入inheritAttrs:false时class等属性就不会自动加到根元素上了。
 
// model: {
// //一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框
// //等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：
// prop: "value",
// event: "change"
// },
　　
props: ["value"],
　　
methods: {
input(e) {
this.$emit("input", e.target.value);
console.log(e.target.value);
}
// change(e) {
// this.$emit("change", e.target.value);
// console.log(e.target.value);
// }
},

</script>

 

 

.sync修饰符

//父组件
 <Sync  v-bind:title.sync="title"></Sync>   等价于       <Sync :title="title" @upDate.title = 'title=$event'></Sync>


//子组件
<template>
　　<a href="javascript:void(0);" @click="changeValue">{{title}}</a>
</template>
<script>
export default {
　　props:{
　　title:{
　　　　default:'1',
　　　　type:String
　　　}
　　},
　　data(){
18　　 　　return{

　　　　}
　　},
methods:{
　　changeValue(){
　　　　this.$emit('update:title', 11111111)
　　　　}
　　}
}
</script>
<style lang="sass" scoped>

</style>