25.Vue.js :兄弟组件传值

最新推荐文章于 2024-07-02 17:50:31 发布

屋顶上的小喵

最新推荐文章于 2024-07-02 17:50:31 发布

阅读量439

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/vivian_1122/article/details/88773539

版权

Vue.js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

eventbus

 //创建一个空的vue实例，作为事件总线
        var eventbus = new Vue();

emitBrotherMyName() {
         //通过事件总线发射一个事件名称和需要传递的数据
         eventbus.$emit('tellBrotherMyName', this.myName);
         }

mounted() {
         //通过eventbus的$on()方法去监听兄弟节点发射过来的事件
          //$on 有两个参数，一个是事件名称，一个是函数，该函数的默认值就是传递过来的数据
           eventbus.$on('tellBrotherMyName', data => {
               this.mySisterName = data
               })
             }

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

<head>
    <title>兄弟间的组件传值</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <father></father>
    </div>
    <script>
        //创建一个空的vue实例，作为事件总线
        var eventbus = new Vue();
        Vue.component('father', {
            template: '<div><son></son><daughter></daughter></div>',
            components: {
                son: {
                    data() {
                        return {
                            mySisterName: '??'
                        }
                    },
                    template: '<span>我妹妹告诉我她叫{{mySisterName}}</span>',
                    mounted() {
                        //通过eventbus的$on()方法去监听兄弟节点发射过来的事件
                        //$on 有两个参数，一个是事件名称，一个是函数，该函数的默认值就是传递过来的数据
                        eventbus.$on('tellBrotherMyName', data => {
                            this.mySisterName = data
                        })
                    }

                },
                daughter: {
                    data() {
                        return {
                            myName: '兰兰'
                        }
                    },
                    template: '<button @click="emitBrotherMyName">点击告诉哥哥我的名字叫{{myName}}</button>',
                    methods: {
                        emitBrotherMyName() {
                            //通过事件总线发射一个事件名称和需要传递的数据
                            eventbus.$emit('tellBrotherMyName', this.myName);
                        }
                    },
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>