Vue组件通信-$attrs与$listeners概念与应用

目录

一、$attrs与$listeners是什么

$attrs与$listeners都是是属于组件实例自身的一个属性

二、$attrs与$listeners怎么用

举例:自定义带hover提示的按钮+点击按钮出现弹窗

父组件内:

子组件内:

三、控制台打印的结果

四、效果呈现

第一种:点击按钮,出现弹框

第二种:鼠标放在按钮上,出现hover提示信息
 

一、$attrs与$listeners是什么

$attrs与$listeners都是是属于组件实例自身的一个属性

$attrs:包含了父作用域中不包含在props中的属性,这些属性可以在组件内部使用,也可以通过v-bind="$attrs"传递给子组件使用。

$listeners:包含了父作用域中的(不含.sync修饰器的)v-on事件监听器,这些监听器可以在组件内部使用,也可以通过v-on="$listeners"传递给子组件使用。

二、$attrs与$listeners怎么用

举例:自定义带hover提示的按钮+点击按钮出现弹窗

父组件内:

接收子组件,向子组件传递数据(参数)定义自定义事件






子组件内:

通过v-bind="$attrs"接收父组件传递的数据

通过v-on="$listeners"可以获取到父组件给子组件传递自定义事件






三、控制台打印的结果

打印this.$attrs可以看到向子组件传递相应的参数(如果子组件props没有接收title,那title也会在以下的参数中)

打印this.$listeners可以看到自定义事件

四、效果呈现

第一种:点击按钮,出现弹框

Vue组件通信-$attrs与$listeners概念与应用_第1张图片

第二种:鼠标放在按钮上,出现hover提示信息

Vue组件通信-$attrs与$listeners概念与应用_第2张图片

你可能感兴趣的:(vue.js,前端,javascript)