vue pass component value $ attrs $ listeners $ bus provide / inject $ parent / $ children

$ Attrs contains the parent scope is not as binding properties prop identified, when a component is not declared props, this will include binding all parent scope,

$ Listeneers includes v-on event listener parent scope, which can be v-on = '$ listeners' incoming internal components;

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 addition, all values ​​passed parent element, if no child element prop,

$ Attrs is {message: 'message info', "msg1": "msg11", "msg2": "msg22", "msg4": "msg44"}, $ listeners pass the event of the parent element, any child elements by $ changeMessage emit trigger event;

 

$ Bus, bus bus

It is passed by value between brothers components to bind events and data through an additional instance of a vue

demo：

var Bus = new new Vue (); // for convenience Bus (empty VUE) defined in a component, in the actual operation of a new generally Bus.js 
Vue.component ( 'C1', { // is globally here component, for example, the same, single file component and the local component are also applicable 
Template: '<div> {{MSG}} </ div>' , 
  Data: () => ({ 
    MSG: '! the Hello World' 
  }), 
  Created () { 
    . Bus $ ON ( 'setMsg', Content => { 
       the this a .msg = Content; 
    }); 
  } 
}); 
Vue.component ( 'C2' , { 
  Template: '<= the Click @ Button "the sendEvent" > Say the Hi </ Button> ' , 
  Methods:{ 
    Send event () {{ 
      Bus. $ Emit ( 'setMsg' 'There Vue!' ); 
    } 
  } 
}); 
var app = new Vue ({ 
    on: '#app' 
})

provide/inject

Provide parent component is provided by a variable, then the sub-sub-assemblies to inject inject variables, no matter how deep sub-assemblies, as long as the call can inject inject provide the data, as long as the life cycle of the parent element, you can call

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>

Subassembly

<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>

Subassembly inject the provide data component of the parent, and can be acquired obj arr