vue inheritAttrs、$attrs和$listeners使用

inheritAttrs、$attrs和$listeners使用场景：

组件传值，尤其是祖孙组件有跨度的传值。

（1）inheritAttrs

属性说明：https://cn.vuejs.org/v2/api/#inheritAttrs

说明比较晦涩。

组件传值一般是通过props传值的。inheritAttrs默认值为true，true的意思是将父组件中除了props外的属性添加到子组件的根节点上(说明，即使设置为true，子组件仍然可以通过$attr获取到props意外的属性)。示例代码：

grandpaDom.vue：

<template>
<div>
<father-dom
 :foo="foo"
:coo="foo"
v-on:upRocket="reciveRocket"
>
</father-dom>
</div>
</template>
<script>
import fatherDom from "./fatherDom.vue";
export default {
data() {
return {
foo:"Hello, world",
coo:"Hello,rui"
}
},
components:{fatherDom},
methods:{
reciveRocket(){
window.console.log('火箭发射成功！')
}
}
}
</script>

fatherDom.vue：

<template>
<div>
<p>------------fatherDom-------------</p>
<p>attrs:{{$attrs}}</p>
<p>foo:{{foo}}</p>
<p>------------fatherDom-------------</p>
<child-dom v-bind="$attrs" v-on="$listeners"></child-dom>
</div>
</template>
<script>
import childDom from "./childDom.vue";
export default {
name:'father-dom',
props:["foo"],
components:{childDom},
}
</script>

说明：grandpaDom.vue将foo和coo属性都放在fatherDom.vue上，但是fatherDom.vue的props值接收了foo，因此grandpaDom的coo属性显示在了fatherDom的根节点上。即：

接着将inheritAttrs:false后（请将fatherDom.vue添加inheritAttrs:false），coo属性就不会显示在fatherDom根节点上了。但是怎么获取到coo呢？

这时就通过$attrs获取到到coo。

接着看孙组件childDom.vue:

<template>
<div>
<p>------------childDom-------------</p>
<p>coo:{{coo}}</p>
<button @click="startUpRocket">我要发射火箭</button>
<p>------------childDom-------------</p>
</div>
</template>
<script>
export default {
name: "childDom",
props: ["coo"],
methods: {
startUpRocket() {
this.$emit("upRocket");
window.console.log('我要发射火箭了。')
}
}
};
</script>

孙组件childDom.vue就可以通过props接收到coo属性了。

好，以上是总祖父--父亲--儿子向下传递值。

那怎么儿子-父亲--祖父传递数据呢呢？

父亲组件使用$listeners传递。

最终祖父组件收到孙组件的事件了。

更多专业前端知识，请上【猿2048】www.mk2048.com

vue inheritAttrs、$attrs和$listeners使用相关推荐

Vue中 $attrs、$listeners使用和理解
前言提示:Vue中常见的组件通信方式可分为三类: 父子通信通常父子传值都是通过prpos,子组件通过events接收通过父链/子链通信($parent/$chldren); ref也可以访 ...
[vue] 说下$attrs和$listeners的使用场景
[vue] 说下attrs和attrs和attrs和listeners的使用场景 <template><el-button v-on="$listeners" v ...
html triggers的作用,Vue为什么要谨慎使用$attrs与$listeners
前言在 Vue 开发过程中,如遇到祖先组件需要传值到孙子组件时,需要在儿子组件接收 props ,然后再传递给孙子组件,通过使用 v-bind="$attrs" 则会带来极大的便 ...
vue组件传值之$attrs、$listeners
组件传值总结 props和emit:父子组件传值 provide和inject:父子组件或者爷孙组件传值 $parent,$root,$chidren:父子组件传值 vuex 事件总线(vue实例) ...
Vue 新增的$attrs与$listeners的详解
$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和 ...
vue v-bind=“$attrs“、v-on=“$listeners“
一.背景在封装组件时候,经常要传递参数,调用事件.我们希望把主导权放在业务组件内,这是引入我们今天的主题: v-bind="$attrs" .v-on="$listen ...
[vue]Extraneous non-emits event listeners (x) were passed to component but could not be automatica
vue报错说: [Vue warn]: Extraneous non-emits event listeners (addToCart) were passed to component but co ...
React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
vue 组件传值$attrs $listeners $bus provide/inject $parent/$children
$attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...

vue inheritAttrs、$attrs和$listeners使用

vue inheritAttrs、$attrs和$listeners使用相关推荐

最新文章

热门文章