vue组件间通信($attrs, $listeners)

一、介绍 $listeners(自下而上传递数据)， $attrs(自上而下多组件传递数据)
在vue组件化开发过程中，涉及到多层组件嵌套，但如果仅仅是传递数据，而不做中间处理，使用Vuex层架复杂度这时候使用。
代码参考地址：https://gitee.com/ligeyihayou/attrs-listeners

二、设计文件结构

// juejin.vue 路由组件入口
// com-one.vue 子组件
// com-two.vue 子组件
// 嵌套关系如下： juejin->com-one->com-two

// juejin.vue
<template>
    <div id="juejin">
        <com-one
                :foo="foo"
                :boo="boo"
                :coo="coo"
                :doo="doo"
                v-on:test1="onTest1"
                v-on:test2="onTest2"
        ></com-one>
    </div>
</template>

<script type="text/ecmascript-6">
    import ComOne from './template/com-one';
    export default {
        props: {},
        computed: {},
        name: 'juejin',
        data () {
            return {
                foo: "Javascript",
                boo: "Html",
                coo: "CSS",
                doo: "Vue"
            };
        },
        created () {
        },
        methods: {
            onTest1 (value) {
                console.log('test1 running...', value);
            },
            onTest2 (value) {
                console.log('test2 running', value);
            }
        },
        mounted () {
            this.$Event.$on('chagne-zyn', value => {
                console.log(value, '来自 juenjin 组件')
            })
        },
        components: { ComOne },
        destroy () {
        }
    };
</script>

// com-one.vue
<template>
    <div id="com-one">
        <p>foo: {{ foo }}</p>
        <p>childCom1的$attrs: {{ $attrs }}</p>
        <com-two v-bind="$attrs" v-on="$listeners"></com-two>
    </div>
</template>

<script type="text/ecmascript-6">
    import ComTwo from './com-two';
    export default {
        props: {
            foo: String // foo作为props属性绑定
        },
        computed: {},
        name: 'com-one',
        data () {
            return {};
        },
        inheritAttrs: false, // 设置为false，父组件传递过来的 数据 不会以html属性的形式出现在当前组件的根元素上面
        created () {
        },
        methods: {

        },
        mounted () {
            this.$emit('test1', 'com-one-$emit');
            this.$Event.$on('chagne-zyn', value=> {  /// 通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级
                console.log(value, '来自 com-one 组件')
            })
        },
        components: {ComTwo},
        destroy () {
        }
    };
</script>

// com-two.vue
<template>
    <div id="com-two">
        <p>boo: {{ boo }}</p>
        <p>childCom2: {{ $attrs }}</p>
        <button @click="test">$emit触发事件</button>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        props: {
            boo: String
        },
        computed: {},
        inheritAttrs: false, // 设置为false，父组件传递过来的 数据 不会以html属性的形式出现在当前组件的根元素上面
        name: 'com-two',
        data () {
            return {};
        },
        created () {
        },
        methods: {
            test(){
                this.$Event.$emit('chagne-zyn', '32');
            },
            link(){
                console.log('$listeners==com-two');
            }
        },
        mounted () {
            this.$emit('test2', 'com-two-$emit'); // 
        },
        components: {},
        destroy () {
        }
    };
</script>

// main.js 
/* eslint-disable */
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.prototype.$Event = new Vue();; // 通过一个空的Vue实例作为中央事件总线（事件中心）
/// +++
let isDisable = true;
 new Vue({
        router,
        render: h => h(App)
    }).$mount('#app');

// 测试结果展示