vue多层次组件监听动作和属性

v-bind="$attrs" v-on="$listeners"

Vue 2.4 版本提供了这种方法,将父组件中不被认为 props特性绑定的属性传入子组件中,通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性,是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁,业务清晰。

比如组件A=>B组件=>C组件等,这种多层级组件,A组件向C组件传递数据或者C组件的事件要触发A组件中的事件的话,就可以在B组件中写成
<template>
 <div>
    <span>{{child1}}<span>
 <!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
 <!-- 通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props声明的) -->
 <c v-bind="$attrs" v-on="$listeners"></c>
 </div>
</template>
<script>
 import c from './c.vue';
 export default {
 props: ['child1'],
 data () {
 return {};
 },
 inheritAttrs: false,
 components: { c },
 mounted () {
    this.$emit('test1');
 }
 };
</script>

C组件

<template>
 <div>
    <span>{{child2}}<span>
 </div>
</template>
<script>
 export default {
 props: [child2'],
 data () {
 return {};
 },
 inheritAttrs: false,
 mounted () {
    this.$emit('test2');
 }
 };
</script>

A组件:

<template>
 <div id="app">
    <b :child1="child1" :child2="child2" @test1="test1" @test2="test2"></b>
 </div>
</template>
<script>
 import b from './b.vue';
 export default {
 data () {
 return {
     child1:'hello child1',
     child2:'hello child2'
 };
 },
 components: { b },
 methods: {
 test1 () {
 console.log('test1');
 },
 test2 () {
 console.log('test2');
 }
 }
 };
</script>

 

posted @ 2018-07-13 15:04  heroljy  阅读(3453)  评论(0编辑  收藏  举报