学习笔记Vue（十一）—— 组件通信（二）兄弟之间通信

最新推荐文章于 2020-05-25 11:29:25 发布

GRANDMA_Z

最新推荐文章于 2020-05-25 11:29:25 发布

阅读量108

点赞数

分类专栏： Vue学习文章标签： Vue JavaScript

本文链接：https://blog.csdn.net/qq_38932377/article/details/95236636

版权

Vue学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

通过在一个组件上触发事件，兄弟组件监听该事件，来传递数据。
在Vue实例上创建一个事件总线（event bus），通过把事件交由该event bus来处理，并由兄弟组件监听event bus上的事件来在兄弟组件间进行通信。
实例：

<body>
    <div id="app">
        <my-input></my-input>
        <my-content></my-content>
    </div>
    <script>
        //事件总线 event bus
        //Vue 实例

        Vue.prototype.bus = new Vue();

        const vm = new Vue({
            el: "#app",
            components: {
                myContent: {
                    data(){
                        return {
                            content: ''
                        }
                    },
                    created(){
                        //监听事件
                        this.bus.$on('click', (content)=>{  
                            console.log(content);
                            this.content = content;
                        });
                    },
                    template: `<div>{{content}}</div>`
                },
                myInput: {
                    data (){
                        return {
                            inputValue: ''
                        }
                    },
                    methods: {
                        handleClick(){
                            console.log(this.inputValue);
                            this.bus.$emit('click', this.inputValue);
                        }
                    },
                    template: `<div>
                                <input type="text" v-model="inputValue">
                                <button @click="handleClick">提交</button>
                            </div>`
                }
            }
        });
    </script>
</body>

GRANDMA_Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记Vue（十一）—— 组件通信（二）兄弟之间通信

通过在一个组件上触发事件，兄弟组件监听该事件，来传递数据。在Vue实例上创建一个事件总线（event bus），通过把事件交由该event bus来处理，并由兄弟组件监听event bus上的事件来在兄弟组件间进行通信。实例：<body> <div id="app"> <my-input></my-input> ...
复制链接

扫一扫