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

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

猜你喜欢