来源
阅读了大漠老师的文章:Vue组件数据通讯新姿势:$attrs 和 $listeners感觉受益匪浅,闲来无事,总结一下vue组件传值的方法
习惯的传值方式
啥也不说,先上图!!
我们常见的组件之间的传值大概都跑不出这幅图,父子、兄弟之间进行通讯。
- 父组件传值子组件:父组件通过props下发给子组件
- 子组件通过事件触发将数据emit给父组件
- 父子组件之间的通讯也可以通过 ref 属性、 children等方法获取数据和事件。
- 兄弟组件之间的通讯则用eventBus或者VueX(不是太复杂的工能,就没有必要使用VueX了,省的画蛇添足)
这些经常用的就不说了。。。。
今天的主角
1.$attr
官网的解释:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
$ attrs这个属性就可以获取到父组件要传给子组件的值。。
官网解释:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
简单来说就是:事件监听,但是监听的事件对象不包括原生的方法,例如@click.native
//代码解释这两个属性的意义
扫描二维码关注公众号,回复:
5507814 查看本文章
// 父组件
<template>
<div id="app">
<h1>测试通讯</h1>
<HelloWorld name="name" age="age" @click.native="haha" @mousemove="smile"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld
},
name: 'app',
data() {
return {
name: 'lao Wang',
age: '26'
}
},
methods: {
haha(){},
smile(){}
}
}
</script>
// 子组件
<template>
<div>
<h1>测试</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
mounted() {
console.log(this.$attrs, this.$listeners);
//{ name: 'lao Wang',age: '26'}
//{mousemove: ƒ}
}
}
</script>
嵌套组件内的应用
在封装组件的时候,有时候会出现组件套组件的情况就会出现祖孙之间的通讯。实现祖孙之间的通讯,如果换成我们经常用的方法(就是上面提到的非 $attr和 $listeners通讯方法),这样的话我们的我我们需要逐层封装方法,传值等等,代码是在是繁琐。而 $attr和 $listeners则很好的解决了这个问题。
//父亲的父亲的页面
<template>
<div id="app">
<h1>测试通讯</h1>
<HelloWorld name="name" age="age" @click.native="haha" @mousemove="smile"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld
},
name: 'app',
data() {
return {
name: 'lao Wang',
age: '26'
}
},
methods: {
haha(){},
smile(){}
}
}
</script>
// 父级页面
<template>
<div>
<h1>测试</h1>
<GrandChild v-bind="$attrs" v-on="$listeners"></GrandChild>
</div>
</template>
<script>
import GrandChild from './GrandChild.vue'
export default {
components: {
GrandChild
},
name: 'HelloWorld',
}
// 孙子页面
<template>
<div>
<h1>孙子页面</h1>
</div>
</template>
<script>
export default {
name: 'GrandChild',
mounted() {
console.log(this.$attrs, this.$listeners);
//{ name: 'lao Wang',age: '26'}
//{mousemove: ƒ}
}
}
</script>
这样是不是就方便多了
小结
个人感觉这两个属性的出现还是非常棒的,最起码组件之间的通讯实现起来更简单了。技术有限,如果有什么不足的地方欢迎各路大神指教,谢谢