平行组件（兄弟组件）通信

mounted 生命周期

$on 立即执行

$emit 快速触发事件

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平行组件通信</title>

</head>

<body>
    <div id="seg1">
        <huahua></huahua>
        <shuandan></shuandan>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS

// 定义全局

// 事件调度器
var Event = new Vue();

Vue.component('huahua', {
    // 双向绑定i_said值到data里  键盘触发事件时调用on_change方法
    template: '<div>我说：<input @keyup="on_change" v-model="i_said"></div>',
    data: function () {
        return {
            i_said: ''
        }
    },
    methods: {
        on_change: function () {
            // 键盘触发事件时调用on_change方法同时调用huahua-said-something事件并把this.i_said作为数据发送过去
            // $emit快速触发事件  第一项为名字 第二项为数据
            Event.$emit('huahua-said-something', this.i_said)
        }
    }
})
Vue.component('shuandan', {
    template: '<div>花花说：{{huahua_said}}</div>',
    data: function () {
        return {
            huahua_said: ''
        }
    },
    // 生命周期
    mounted: function () {
        var me = this;
        // $on 开始监听
        // 在初始化时调用huahua-said-something并用data接收this.i_said
        Event.$on('huahua-said-something', function (data) {
            console.log(data);
            me.huahua_said = data;
        })
    }
})

var app = new Vue({
    el: '#seg1'
})

吃瓜的阳大王

发布了19 篇原创文章 · 获赞 1 · 访问量 168

私信关注

平行组件（兄弟组件）通信

平行组件（兄弟组件）通信

mounted 生命周期

$on 立即执行

$emit 快速触发事件

HTML

JS

猜你喜欢