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