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

最新文章

热门文章