vue-例5-18任意组件及平行组件通信.html

最新推荐文章于 2024-09-30 14:28:41 发布

虾米大王

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量71

点赞数

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/modern358/article/details/129976741

版权

Vue 专栏收录该内容

661 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任意组件及平行组件通信</title>
</head>
<body>
    <h2>组件之间的通信</h2>
    <p>有时候两个组件也需要通信，非父子关系。</p>
    <p>在简单的场景下，可以使用一个空的vue实例作为中央事件总线</p>

    <div id="app">
        <h3>组件A：向总线上报事件</h3>
        <my-component-a v-bind:counter="total"></my-component-a>
        <h3>组件B：通过总线监听相关事件</h3>
        <my-component-b></my-component-b>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let bus = new Vue();

        Vue.component('my-component-a',{
            template:'<div><p>组件A</p><hr><button v-on:click="doClick">{{counter}}</button><hr></div>',
            data:function () {
                return{
                    counter:1,
                }
            },
            methods:{
                doClick:function () {
                    this.counter++;
                    bus.$emit('btn-click',this.counter);
                }
            }
        });

        Vue.component('my-component-b',{
            template: '<div><p>组件B</p><hr>计数器：{{counter}}<hr></div>',
            data:function () {
                return {
                    counter: 0
                }
            },
            methods: {
                foo:function (val) {
                    console.log(val);
                    this.counter = val;
                },
                created:function () {
                    bus.$on('btn-click',this.foo)
                }
            }
        });

        let vm = new Vue({
            el:'#app',
            data:{
                total:0
            },
            methods:{
                doChildClick:function () {
                    this.toatl += 1;
                }
            }
        });
        //抱歉，各位没调试出来结果，不知道哪里不合适
    </script>
</body>
</html>