组件通信

// 定义一个名为 componentC 的局部子组件
const componentC = {
    props: ['info'], // 在子组件中使用props接收
    data() {
        return {
            str: 'I am C'
        }
    },
    template: '<span>{{str}} : {{info}}</span>'
}
...
// 定义一个名为 componentB 的父组件，也是一个局部组件
const componentB = {
    data() {
        return {
            str: 'I am B',
            // 传给子组件的值
            info: 'data from B'
        }
    },
    template: '<div>'+
        '{{str}}'+
        '<div>'+
            '<component-c :info=\'info\'/>,'+
            '<component-d />'+
        '</div>'+
        '</div>',
    // 利用 components 可以将之前定义的C、D组件挂载到B组件上，component-c 和 component-d 是C/D组件的名称，
    // 对应 template 中的 <component-c/> 和 <component-d />
    components: {
        'component-c': componentC,
        'component-d': componentD
    }
}

<component-c info='data from B' />

props: {
    info: {
        type: String,  // 限制为字符串类型
        default: ''    // 默认值
    }
}

class Person (firstName, lastName) {
    constructor {
        this.firstName = firstName
        this.lastName = lastName
    }
}
// 在props接收时，这样设置
props: {
    author: Person
}

this.info= 'abc'

props: ['info'],
watch: {
    info(v) {
        console.log(v)
    }
}

// 定义一个名为 componentD 的局部子组件
const componentD = {
    data() {
        return {
            str: 'I am D'
        }
    },
    template: '<span>{{str}}</span>',
    methods: {
        dFunc() {
            console.log('D的方法')
        }
    }
}

// 定义一个名为 componentB 的父组件，也是一个局部组件
const componentB = {
    data() {
        return {
            str: 'I am B',
            // 传给子组件的值
            info: 'data from B'
        }
    },
    template: '<div>'+
        '{{str}}'+
        '<div>'+
            '<component-c :info=\'info\'/>,'+
            '<component-d ref=\'componentD\'/>'+
        '</div>'+
        '</div>',
    // 利用 components 可以将之前定义的C、D组件挂载到B组件上，component-c 和 component-d 是C/D组件的名称，
    // 对应 template 中的 <component-c/> 和 <component-d />
    components: {
        'component-c': componentC,
        'component-d': componentD
    },
    mounted() {
        this.$refs.componentD.dFunc()
    }
}

<button ref="btn"></button>

// 定义一个名为 componentC 的局部子组件
const componentC = {
    data() {
        return {
            str: 'I am C'
        }
    },
    template: '<span>{{str}}</span>',
    // 在子组件的 mounted 方法中调用 this.$emit 来触发自定义事件
    mounted() {
        this.$emit('myFunction', 'hi')
    }
}

// 定义一个名为 componentB 的父组件，也是一个局部组件
const componentB = {
    template: '<div>'+
        '<div>'+
        // 将 myFunction 方法通过 v-on 传入子组件
        '<component-c @myFunction=\'myFunction\' />,'+
        '</div>'+
        '</div>',
    components: {
        'component-c': componentC
    },
    methods: {
        // 定义父组件需要被子组件调用的方法
        myFunction(data) {
            console.log('来自子组件的调用', data)
        }
    }
}

// 定义一个名为 componentC 的局部子组件
const componentC = {
    data() {
        return {
            str: 'I am C'
        }
    },
    template: '<span>{{str}}</span>',
    mounted() {
        // 直接采用 $parent 方法进行调用
        this.$parent.myFunction('$parent 方法调用')
    }
}

// 定义一个名为 componentB 的父组件，也是一个局部组件
const componentB = {
    template: '<div>'+
        '<div>'+
        '<component-c />,'+
        '</div>'+
        '</div>',
    components: {
        'component-c': componentC
    },
    methods: {
        // 定义父组件需要被子组件调用的方法
        myFunction(data) {
            console.log('来自子组件的调用', data)
        }
    }
}

// 定义一个名为 componentC 的局部子组件
const componentC = {
    props: ['infoFromD'],
    template: '<span>收到来自D的消息：{{infoFromD}}</span>'
}

// 定义一个名为 componentD 的局部子组件
const componentD = {
    template: '<span><button @click="clickCallback">点我换通知C</button></span>',
    methods: {
        clickCallback() {
            // 先通知父元素
            this.$emit('saidToC', 'I am D')
        }
    }
}

// 定义一个名为 componentB 的父组件，也是一个局部组件
const componentB = {
    data() {
        return {
            infoFromD: ''
        }
    },
    template: '<div>'+
        '<div>'+
        '<component-c :infoFromD="infoFromD" />,'+
        '<component-d @saidToC="saidToC" />'+
        '</div>'+
        '</div>',
    components: {
        'component-c': componentC,
        'component-d': componentD
    },
    methods: {
        saidToC(data) {
            console.log('来自D组件的调用', data)
            // 在父元素中通过 props 的更新来更新 C 组件的数据
            this.infoFromD = data;
        }
    }
}

// 定义一个名为 componentC 的局部子组件
const componentC = {
    data() {
        return {
            infoFromD: ''
        }
    },
    template: '<span>收到来自D的消息：{{infoFromD}}</span>',
    mounted: function () {
        this.$EventBus.$on('eventBusEvent', function (data) {
            this.infoFromD = data;
        }).bind(this)
    }
}

// 定义一个名为 componentD 的局部子组件
const componentD = {
    template: '<span><button @click="clickCallback">点我换通知C</button></span>',
    methods: {
        clickCallback() {
            // 先通知父元素
            this.$EventBus.$emit('eventBusEvent', 'I am D')
        }
    }
}

// 定义一个名为 componentB 的父组件，也是一个局部组件
const componentB = {
    data() {
        return {
            str: 'I am B'
        }
    },
    template: '<div>'+
        '<component-c />,'+
        '<component-d />'+
        '</div>',

    components: {
        'component-c': componentC,
        'component-d': componentD
    }
}

// 定义中央事件总线
var EventBus = new Vue(); // vue2语法

// 将中央事件总线赋值给 Vue.prototype，这样所有组件都能访问到了
Vue.prototype.$EventBus = EventBus;

// 定义一个根实例 vmA
var vmA = new Vue({ // vue2语法
    el: '#app',
    components: {
        'component-b': componentB
    }
})

<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
或
import mitt from 'mitt'

const emitter = mitt()

// 子组件
const componentC = {
    data () {
        return {
            infoFromD: ''
        }
    },
    template: '<span>收到来自D的消息：{{infoFromD}}</span>',
    mounted() {
        emitter.on('eventBusEvent', (data)=> {
            this.infoFromD = data;
        })
    }
}

// 子组件
const componentD = {
    template: '<span><button @click="clickCallback">点我换通知C</button></span>',
    methods: {
        clickCallback() {
            emitter.emit('eventBusEvent', 'I am D')
        }
    }
}

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
import eventBus from './eventBus';

export default {
  methods: {
    sendMessage() {
      eventBus.emit('message', 'Hello from Component A');
    }
  }
}
</script>

<template>
  <p>{{ message }}</p>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import eventBus from './eventBus';

export default {
  setup() {
    const message = ref('');

    // 监听事件
    const handleMessage = (msg) => {
      message.value = msg;
    };

    onMounted(() => {
      eventBus.on('message', handleMessage);
    });

    onUnmounted(() => {
      eventBus.off('message', handleMessage);
    });

    return { message };
  }
}
</script>