vue组件间通信方式之父传子，子传父，兄弟相传

半笑猫

已于 2022-07-27 11:51:49 修改

阅读量635

点赞数

文章标签： vue.js 前端 javascript

于 2022-07-20 21:49:48 首次发布

本文链接：https://blog.csdn.net/Amanologue/article/details/125901211

版权

一、vue组件

组件是用来封装可重用代码，扩展html标签功能的一个拥有预定义选项的vue实例

组件与组件之间是相互独立、无法通信、可嵌套的

组件是可以被多次重复使用的

二、组件间的通信方式

1、父组件向子组件传值


<body>
    <div id="app">
        <parent></parent>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 定义一个子组件
        const Son = {
            // 定义一个模板，由于模板里面有标签，用反引号可识别
            // 子组件接收父组件传的值后，自己也就拥有了这个值，此时可在模板展示
            template: `
            <div>
                <h1>子组件</h1>
                <h1>{{msg}}</h1>
            </div>
            `,
            //子组件通过props属性接收父组件传值
            props:['msg']
        }

        // 定义一个父组件
        const Parent = {
        // 父组件通过子组件标签的v-bind属性向子组件传值
            template: `
            <div>
                <h1>父组件</h1>
                <Son v-bind:msg='msg'/>
            </div>
            `,
            components: {
                Son
            },
            data(){
                return{
                    msg:'父组件给子组件传消息'
                }
            }
        }

        // Vue实例
        new Vue({
            el: '#app',
            components: {
                Parent,
                Son
            }
        })
    </script>
</body>

2、父组件向子组件传值

在子组件中通过this.$emit('listenSon', msg)方法向父组件通信，如下
在父组件的子组件上绑定listenSon方法进行监听，绑定一个receive方法，当该方法触发时，执行父组件中相应的receive方法

<body>
    <div id="app">
        <parent>
            <parent />
    </div>
    <script src="./vue.js"></script>
    <script>
        //定义一个子组件
        const Son = {
            template: `
            <div>
                <h1>子组件</h1>
                <h1>{{msg}}</h1>
                <button @click="listenSon(msg)">子传父</button>
            </div>
            `,
            data() {
                return {
                    msg: '你好，父组件'
                }
            },
            methods: {
                listenSon(msg) {
                    this.$emit('listenSon', msg)
                }
            }
        }
        //定义一个父组件
        const Parent = {
            template: `
            <div>
                <h1>父组件</h1>
                <h1>{{msg}}</h1>
                <Son @listenSon='receive($event)' />
            </div>
            `,
            data: function () {
                return {
                    msg: ''
                }
            },
            methods: {
                receive(msg) {
                    this.msg = msg
                }
            },
            components: {
                Son
            }
        }

        new Vue({
            el: "#app",
            components: {
                Parent
            }
        })
    </script>
</body>

3、兄弟组件之间传值

兄弟组件之间通过事件中心进行通信
单独的事件中心管理组件间通信
```
const eventHub = new Vue()
```
监听事件

eventHub.$on('事件名称',function(参数,..){})
触发事件
eventHub.$emit('兄弟事件名称',参数)
取消监听事件
eventHub.$off('事件名称')

<body>
    <div id="app">
        <test-a></test-a>
        <test-b></test-b>
        <button @click="cancle">取消事件监听</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 创建一个实践中心对象
        const eventHub = new Vue()
        // TestA组件
        const TestA = {
            template: `
            <div>
                <h1>A组件</h1>
                <h1>{{msgFromB}}</h1>
                <button @click="sentToB(msg)">A->B传参</button>
            </div>
            `,
            data() {
                return {
                    msg: 'Hello B，我是A',
                    msgFromB: ''
                }
            },
            methods: {
                sentToB(msg) {
                    eventHub.$emit('listenA', msg)
                }
            },
            mounted() {
                // 页面加载时监听eventHub
                eventHub.$on('listenB', msg => {
                    this.msgFromB = msg
                })
            }
        }

        // TestB组件
        const TestB = {
            template: `
            <div>
                <h1>B组件</h1>
                <h1>{{msgFromA}}</h1>
                <button @click="sentToB(msg)">B->A传参</button>

            </div>
            `,
            data() {
                return {
                    msg: 'Hello A，我是B',
                    msgFromA: ''
                }
            },
            methods: {
                sentToB(msg) {
                    eventHub.$emit('listenB', msg)
                }
            },
            mounted() {
                // 页面加载时监听eventHub
                eventHub.$on('listenA', msg => {
                    this.msgFromA = msg
                })
            }
        }

        new Vue({
            el: '#app',
            components: {
                TestA,
                TestB
            },
            methods: {
                // 取消监听
                cancle() {
                    eventHub.$off('listenA')
                }
            }
        })
    </script>
</body>