vue .sync $attrs $listener inhe

sync 修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
以前 父组件向子组件传值用props；子组件不能直接更改父组件传入的值，需要通过$emit触发自定义事件，通知父组件改变后的值

//父组件
<template>
  <div class="parent">
    <p>父组件传入子组件的值：{{name}}</p>
    <fieldset>
      <legend>子组件</legend>
      <child :val="name" @update="modify">
      </child>
    </fieldset>
  </div>
</template>

<script>
import Child from './Child'
export default {
  components:{Child},
  data () {
    return {
      name:'linda'
    }
  },
  methods:{
    modify(newVal){
      this.name=newVal
    }
  }
}
</script>

//子组件
<template>
    <label class="child">
        输入框：
        <input :value=val @input="$emit('update',$event.target.value)"/>
    </label>
</template>
<script>
export default {
    props:['val']
}
</script>

vue2.4以后的写法明显舒服许多，上面同样的功能，直接上代码

//父组件
<template>
  <div class="parent">
    <p>父组件传入子组件的值：{{name}}</p>
    <fieldset>
      <legend>子组件</legend>
      <child :val.sync="name">
      </child>
    </fieldset>
  </div>
</template>

<script>
import Child from './Child'
export default {
  components:{Child},
  data () {
    return {
      name:'linda'
    }
  }
}
</script>

//子组件
<template>
    <label class="child">
        输入框：
        <input :value=val @input="$emit('update:val',$event.target.value)"/>
    </label>
</template>
<script>
export default {
    props:['val']
}
</script>

当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：

//父组件
<template>
  <div class="parent">
    <p>父组件传入子组件的值：{{name}}</p>
    <fieldset>
      <legend>子组件</legend>
      <child v-bind.sync="doc">
      </child>
    </fieldset>
  </div>
</template>

<script>
import Child from './Child'
export default {
  components:{Child},
  data () {
    return {
      doc: {
            phone: '12',
            sex: '男'
        }
    }
  }
}
</script>

//子组件
<template>
  <div>
<label class="child">
        输入框：
        <input :value="phone" @input="$emit('update:phone',$event.target.value)"/>
    </label>
<label class="child">
        输入框：
        <input :value="sex" @input="$emit('update:sex',$event.target.value)"/>
    </label>
</div>
    
</template>
<script>
export default {
    props:['phone', 'sex']
}
</script>

$attrs

想象一下，你打算封装一个自定义input组件——MyInput，需要从父组件传入type，placeholder，title等多个html元素的原生属性。此时你的MyInput组件props如下：

props:['type','placeholder','title',...]

很丑陋不是吗？$attrs专门为了解决这种问题而诞生，这个属性允许你在使用自定义组件时更像是使用原生html元素。比如：

 <my-input placeholder="请输入" title="'姓名'" v-model="val"></my-input>

my-input的使用方式就像原生的input一样。而MyInput并没有设置props，如下

<template>
    <div>
        <label>
            输入框: <input v-bind="attrsAll" @input="$emit('input',$event.target.value)"/>
        </label>
    </div>
</template>

<script>
export default {
  name: 'myInput',
  computed: {
    attrsAll () {
      return {
        value: this.$vnode.data.model.value,
        ...this.$attrs
      }
    }
  }
}
</script>

v-model是v-bind:value和v-on:input的简写，所以在父组件你完全可以直接写 :value="name",@input="val => name = val"。查看文档

另外一种

因为父组件添加了 v-model 相当于添加了 :value属性 @input 事件
<my-input placeholder="请输入" title="'姓名'" v-model="val"></my-input>

在父组件中 给子组件设置:value="name"相当于给子组件设置props:['value']，但在子组件中直接从$attrs获取不到value，可能内部做了处理,,,
所以子组件还有下面写法，我倾向于这种写法，因为它更优雅

<template>
    <div>
        <label>
            输入框: <input v-bind="$attrs" :value="value" @input="$emit('input',$event.target.value)"/>
        </label>
    </div>
</template>

<script>
export default {
  name: 'myInput',
  props: ['value']
}
</script>

$listener

同上面$attrs属性一样,这个属性也是为了在自定义组件中使用原生事件而产生的,比如要让前面的MyInput 组件实现focus事件,直接这样写是没用的

<my-input @focus="focus" placeholder="请输入你的姓名" type="text" title="姓名" v-model="name"/>

必须要让focus事件作用于MyInput组件的input元素上，最终的MyInput源码如下：

<template>
    <div>
        <label>
            输入框: <input  v-on="inputListeners" v-bind="$attrs" :value="value" @input="$emit('input',$event.target.value)"/>
        </label>
    </div>
</template>
<script>
export default {
  name: 'myInput',
  props: ['value'],
  created () {
    console.log(this.$listeners)
  },
  computed: {
    inputListeners: function () {
      var vm = this
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  }
}
</script>

详情官网https://cn.vuejs.org/v2/guide/components-custom-events.html#%E5%B0%86%E5%8E%9F%E7%94%9F%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E5%88%B0%E7%BB%84%E4%BB%B6

组件上使用 v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

<input v-model="searchText">
等价于：
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

为了让它正常工作，这个组件内的 <input> 必须：
将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
写成代码之后是这样的：

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

inheritAttrs

inheritAttrs到底有啥用？到底用在哪里？看下边代码，

<template>
    <childcom :name="name" :age="age" type="text"></childcom>
</template>
<script>
export default {
    'name':'test',
    props:[],
    data(){
        return {
            'name':'张三',
            'age':'30',
            'sex':'男'
        }
    },
    components:{
        'childcom':{
            props:['name','age'],
            template:`<input type="number" style="border:1px solid blue">`,
        }
    }
}
</script>

上面代码你觉得input上会怎么显示？ 父组件传递了type="text"，子组件里input 上type="number"，那渲染到页面会是什么样？渲染图如下：

image.png

看到没，父组件传递的type="text"覆盖了input 上type="number"，这岂不是把我的input数据类型都给改变了，这岂不是有问题，这不是我想要的！！！！看到这里明白了吗？回头去体会下上面官网的原话！！！

需求：我需要input 上type="number"类型不变，但是我还是要取到父组件的type="text"的值，那么代码如下：

<template>
    <childcom :name="name" :age="age" type="text"></childcom>
</template>
<script>
export default {
    'name':'test',
    props:[],
    data(){
        return {
            'name':'张三',
            'age':'30',
            'sex':'男'
        }
    },
    components:{
        'childcom':{
            inheritAttrs:false,
            props:['name','age'],
            template:`<input type="number" style="border:1px solid blue">`,
            created () {
                console.log(this.$attrs.type)
            }
        }
    }
}
</script>

页面渲染图如下：

image.png