$attrs和$listeners的使用(VUE)

最新推荐文章于 2023-10-09 13:57:17 发布

qq_46620208

最新推荐文章于 2023-10-09 13:57:17 发布

阅读量304

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46620208/article/details/126973321

版权

功能：可将A组件的信息传递给C组件。

在未使用前，默认将父作用域的不被认作props的属性，“回退”且作为普通的HTML特性应用在子组件的根元素上。在vue2.4 新增了inheritAttrs， inheritAttrs的默认值为true, 将inheritAttrs的值设为false, 这些默认的行为会禁止掉。但是通过实例属性$attrs ,可以将这些特性生效，且可以通过v-bind 绑定到子组件的非根元素上。

可以看下面的特例：
A组件：

<template>
   <div>
     <B :foo="foo" :coo="foo" @getValue="getValue"></B>
   </div>
</template>
<script>
   import B from "./B.vue";
   export default {
     data() {
        return {
          foo:"Hello, world",
          coo:"Hello,rui"
        }
     },
     components:{ B },
     methods: {
     	getValue(item) {
     		console.log(item, '从C组件传来的值')
     	}
   }
</script>

B组件:
设置 inheritAttrs:false 禁止父元素的默认行为
在此处引入的c组件上绑定 $a tt rs 和$ listeners
可以将不接收的数据传递给C

<template>
   <div>
   	<p>{{foo}}</p>
    <C v-bind="$attrs" v-on="$listeners"></C>
   </div>
</template>
<script>
   import C from "./C.vue";
   export default {
    props:["foo"],
 	inheritAttrs:false,
    components:{ C },
   }
</script>

C组件：

<template> 
	 <div>
	 	<p>{{coo}}</p>
	 	<button @click="click">点击</button>
	 </div>
</template>
<script>
 export default {
	 name:'C',
	 props:['coo'],
	 methods:{
	 click(){
		 this.$emit("getValue", 'c来的')
	 }
 }
</script>