10betVue组件通信之$attrs、$listeners

来源:http://www.chinese-glasses.com 作者:Web前端 人气:170 发布时间:2020-05-06
摘要:时间: 2019-09-09阅读: 107标签: props 时间: 2019-08-15阅读: 156标签: 组件前言 之前看了一篇关于Vue开发技巧的文章,其中提到了在写高级组件时,通过v-bind="$props"将props一次性向下传递。这种向下

时间: 2019-09-09阅读: 107标签: props

时间: 2019-08-15阅读: 156标签: 组件前言

之前看了一篇关于Vue开发技巧的文章,其中提到了在写高级组件时,通过v-bind="$props"将props一次性向下传递。这种向下传递的方式我之前没有用过,便看了下官网的介绍,并补充了一些相关API用法,在这里记录一下,方便自己以后查看。先进行相关的属性介绍,代码在后面。

vue通信手段有很多种,props/emit、vuex、event bus、provide/inject 等。还有一种通信方式,那就是$attrs$listeners,之前早就听说这两个api,趁着有空来补补。这种方式挺优雅,使用起来也不赖。下面例子都会通过父、子、孙子,三者的关系来说明使用方式。

使用介绍:

$attrs

v-bind="$props": 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。vm.$props: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。官网介绍:#vm-propsv-bind="$attrs": 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。vm.$attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。v-on="$listeners": 将父组件标签上的自定义事件向下传递,其子组件可以直接通过this.$emit(eventName)的方式调用。vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

官方解释

相关代码

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和style除外),并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

index.vue页面

我的理解

 template div h1props、属性、事件传递/h1 app-parent test="123" :name="name" :age="age" v-on:start1="say1" @start2="say2"/app-parent /div /template script import AppParent from './parent.vue'; export default { data() { return { name: '传给父组件的值', age: '18' }; }, components: { AppParent }, methods: { say1() { console.log('第一个。。。。。'); }, say2() { console.log('第二个。。。。。'); } } } /script

接收除了props声明外的所有绑定属性(class、style除外)

parent.vue组件

图解:

 template div h3父组件/h3 div组件名上绑定的非props特性($attrs): {{$attrs}}/div app-child v-on="$listeners" v-bind="$props"/app-child /div /template script import AppChild from './child.vue'; export default { data() { return { }; }, inheritAttrs: false, props: ['name', 'age'], components: { AppChild }, mounted() { this.$emit('start1'); } } /script

由于child.vue 在 props 中声明了 name 属性,$attrs 中只有age、gender两个属性,输出结果为:

child.vue组件

{ age: "20", gender: "man" }

子组件 父组件传递过来的名称: {{name}} 父组件传递过来的年龄: {{age}} " title="" data-original-title="复制">

另外可以在 grandson.vue 上通过 v-bind="$attrs", 可以将属性继续向下传递,让 grandson.vue 也能访问到父组件的属性,这在传递多个属性时会显得很便捷,而不用一条条的进行绑定。

本文由10bet发布于Web前端,转载请注明出处:10betVue组件通信之$attrs、$listeners

关键词:

最火资讯