vue 组件传值$attrs $listeners $bus provide/inject $parent/$children

$attrs 包含了父作用域中不作为prop被识别的特性绑定，当一个组件没有声明props时，这里会包含所有父作用域的绑定，

$listeneers 包含了父作用域中的v-on事件监听器，它可以通过v-on='$listeners'传入内部组件；

demo:

parent:

<template><div><h1>this is test tempalte</h1><child :msg='message' msg1='msg11' msg2='msg22' @changeMessage='changeMessage' msg4='msg44'></child></div>
</template>
<script>
import child from '@/components/attr/attr1'
export default {name:'',components:{child},data(){return{message:'message info',}},methods:{changeMessage(msg){alert(msg);}}
}
</script>

child

<template><div><h2 @click='change' style='color:red'>{{$attrs}}</h2></div>
</template>
<script>
export default {name:'',props:['msg'],components:{'child-child':child},data(){return{}},methods:{change(){this.$emit('changeMessage','from attr1');},change1(msg){alert(msg);}}
}
</script>

$attrs:{ "msg1": "msg11", "msg2": "msg22", "msg4": "msg44" },除了prop之外，父元素传递的所有值，如果子元素没有prop，

$attrs是{message:'message info',"msg1": "msg11", "msg2": "msg22", "msg4": "msg44" },$listeners传递父元素的事件，任意子元素可以通过$emit触发changeMessage事件；

$bus,bus总线

就是兄弟组件之间的传值，通过一个额外的vue实例来绑定事件和数据

demo：

var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
Vue.component('c1',{ //这里已全局组件为例，同样，单文件组件和局部组件也同样适用
template:'<div>{{msg}}</div>',data: () => ({msg: 'Hello World!'}),created() {Bus.$on('setMsg', content => { this.msg = content;});}
});
Vue.component('c2',{template: '<button @click="sendEvent">Say Hi</button>',methods: {sendEvent() {Bus.$emit('setMsg', 'Hi Vue!');}}
});
var app= new Vue({el:'#app'
})

provide/inject

父组件通过provide来提供变量，然后子子组件中通过inject来注入变量，不论子组件有多深，只要调用inject就可以注入provide中的数据，只要在父元素的生命周期中，都可以调用

demo：

<template><div><h1>this is test tempalte</h1><child :msg='message' msg1='msg11' msg2='msg22' @changeMessage='changeMessage' msg4='msg44'></child></div>
</template>
<script>
import child from '@/components/attr/attr1'
export default {name:'',components:{child},provide:{arr:[1,2,3,4],obj:{name:'zahngsan',age:12}},data(){return{message:'message info',}},methods:{changeMessage(msg){alert(msg);}}
}
</script>

子组件

<template><div><h2 @click='change' style='color:red'>{{$attrs}}</h2><child-child v-bind='$attrs' v-on='$listeners' @change1='change1'></child-child></div>
</template>
<script>
import child from '@/components/attr/attr2'
export default {name:'',props:['msg'],components:{'child-child':child},data(){return{arr:this.arr}},inject:['arr','obj'],mounted:function(){console.log(this.arr,this.obj);},methods:{change(){this.$emit('changeMessage','from attr1');},change1(msg){alert(msg);}}
}
</script>

子组件inject父组件中provide中的数据，可以获取到obj和arr

转载于:https://www.cnblogs.com/xiaofenguo/p/11264064.html

vue 组件传值$attrs $listeners $bus provide/inject $parent/$children相关推荐

vue之组件传值爷到孙 provide inject
目录 vue之组件传值爷到孙 provide && inject 使用 provide提供依赖,单个数据,数组形式接受根组件Main.vue 子组件 B.vue BSon.vue ...
vue和html传值,vue组件传值.html
.ball{ width: 20px; height: 20px; border-radius: 20px; background-color: red; } 这是一个新的全局组件 var app = ...
vue跨组件之间传值Provide/Inject
官网传送门:inject Vue2.2.0+ # 背景关于Vue组件的通讯方式相信大家能倒背如流父子组件:通过prop,$emit,[$root,$parent,$children] 非父子 ...
Vue 组件化通信 provide inject ,dispatch ,boardcast
入门作为前端最容易上手的框架,Vue入门其实没啥说的,我放一段清单的代码,大家能看懂就说明能上手了 <template><div id="app">< ...
export default用法vue_Vue组件通信—provide/inject
前言: 之前在 Vue 中进行组件通信一般都会使用 props,开始使用 provide/inject 是非常偶然的一次尝试. 当时在开发中需要实现祖孙组件,甚至祖祖祖祖孙组件之间的通信,在这种多层级 ...
Vue组件传值——兄弟组件传值
兄弟组件传值兄弟组件之间彼此没有联系,它们需要通过中间Vue实例对象bus(快递员)进行数据传递. 1. 声明事件给组件实例(或Vue实例) 声明事件有两种方式: 直接声明通过$on实现给组件 ...
vue学习【非父子组件传值问题（Bus/总线/观察者模式）】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...
Vue组件传值(props属性,父到子,子到父,兄弟传值)
文章目录 @[TOC](文章目录) 前言一.props是什么? 使用规则二.父传子 props 实现步骤代码实现效果展示二.子传父 $emit 实现步骤代码实现效果展示三.兄弟传值 E ...
Vue自定义组件及组件传值
vue自定义组件: 1.在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2.Weekly.vue: 3.在app.vue中引用组件: js ...

vue 组件传值$attrs $listeners $bus provide/inject $parent/$children

vue 组件传值$attrs $listeners $bus provide/inject $parent/$children相关推荐

最新文章

热门文章