平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“Vue2.4+新增属性.sync、$attrs、$listeners的具……”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。

sync

理解这一步时，在vue2.4以前，父组件向子组件传值用props；子组件不能直接更改父组件传入的值，需借助$emit触发自定义事件，通知父组件改变后的值。比较繁琐，写法如下所示：

//父组件
<template>
 <p class="parent">
  <p>父组件传入子组件的值：{{name}}</p>
  <fieldset>
   <legend>子组件</legend>
   <child :val="name" @update="modify">
   </child>
  </fieldset>
 </p>
</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>
 <p class="parent">
  <p>父组件传入子组件的值：{{name}}</p>
  <fieldset>
   <legend>子组件</legend>
   <child :val.sync="name">
   </child>
  </fieldset>
 </p>
</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>

实际处理时，写法上简化了一部分，很明显父组件不用再定义方法检测值变化了。其实只是对以前的$emit方式的一种缩写，.sync其实就是在父组件定义了一update:val方法，来子组件修改值的事件。

$attrs

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

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

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

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

理解这一步时，my-input的采用方式就像原生的input一样。而MyInput同时没有设置props，如下所示

<template>
  <p>
    <label>输入框：</label><input v-bind="$attrsAll" @input="$emit('input',$event.target.value)"/>
  </p>
</template>
<script>
export default {
  inheritAttrs:false,
  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"。查看文档

疑难

引用下vue的官方api中对$attrs的说明

$attrs包含了父作用域中不作为 prop 被识别 (且拿到) 的特性绑定 (class 和 style 除外)

实际处理时，比较迷惑的一点是给子组件设置:value="name"相当于给子组件设置props:['value']，所以在MyInput中直接从$attrs拿到不到value，需重新包装$attrsAll，添加value属性。所以子组件还有下面写法，我倾向于这种写法，因为它更优雅

<template>
  <p>
    <label>输入框：</label><input v-bind="$attrs" :value="value" @input="$emit('input',$event.target.value)"/>
  </p>
</template>
<script>
export default {
  inheritAttrs:false,
  props:['value']
}
</script>

$listener

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

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

在这个场景下，必须要让focus事件作用来MyInput组件的input元素上，最后的MyInput源码如下所示：

<template>
  <p>
    <label>输入框：</label><input v-bind="$attrsAll" v-on="$listenserAll"/>
  </p>
</template>
<script>
export default {
  inheritAttrs:false,
  props:['value'],
  computed:{
     $attrsAll() {
      return {
        value: this.value,
        ...this.$attrs
      }
    },
    $listenserAll(){
      return Object.assign(
        {},
        this.$listeners,
        {input:(event) => this.$emit('input',event.target.value)})
    }
  }
}
</script>

到此这篇关于Vue2.4+新增属性.sync、$attrs、$listeners的具体采用的文章就介绍到这了,更多相关Vue2.4 .sync、$attrs、$listeners内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多兼容脚本之家！

您可能感兴趣的文章:

• Vue v2.4中新增的$attrs及$listeners属性采用教程
• Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
• Vue为什么要谨慎采用$attrs与$listeners
• Vue组件通信$attrs、$listeners实现原理解析
• 详解Vue中$props、$attrs和$listeners的采用方法
• Vue封装组件利器之$attrs、$listeners的采用
• Vue中$attrs与$listeners的采用教程
• vue $attrs和$listeners的采用与区别
• 轻松聊聊vue2.x的$attrs和$listeners