vue---子父、父子、非父子组件通信_非父子组件通信 vue 1.0-CSDN博客

子组件和父组件通信

在父组件中使用子组件时自定义事件，设置该事件的回调函数
在子组件中需要传数据给父组件时调用this.$emit触发上面自定义的事件，并且设置要发生给父组件的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>展示子组件的数据：{{pMsg}}</p>
        <hr/>
        <my-component v-on:my-click="show"></my-component>
    </div>
    <script src="./vue.js"></script>
    <script>
        //父组件--->使用子组件时通过自定义属性携带值--->子组件通过props接收自定义属性的值
        //子组件和父组件通信：
        //  在父组件中使用子组件时自定义事件，设置该事件的回调函数
        //  在子组件中需要传数据给父组件时调用this.$emit触发上面自定义的事件，并且设置要发生给父组件的数据

        //组件定义
        const MyComponent={//组件选项
            template:`<div>
                    <input v-model="msg"/>
                    <button @click="send">发送数据给父组件</button>
                </div>`,
            data(){
                return {
                    msg:'hello'
                }
            },
            methods:{
                send(){
                    //发送是数据给父子组件
                    //参数1指定的事件
                    //参数2...:发送给对应事件回调函数的数据
                    this.$emit('my-click',this.msg);//触发某个事件执行

                }
            }
        }

        new Vue({
            el:"#app",
            components:{
                MyComponent     //等效于：MyComponent:MyComponent
            },
            data:{
                pMsg:''
            },
            methods:{
                show(param1){
                    console.log('接收到了子组件的数据...',param1);
                    this.pMsg=param1;//将子组件的数据赋值给父组件
                }
            }
        })
    </script>
</body>
</html>

父子组件通信

父组件可以使用props属性将值传给子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-component></my-omponent>
    </div>
    <script src="./vue.js"></script>
    <script>
        //定义组件
        const myComponent={
            template:`<div>
                    <h1>{{title}}</h1>
                    <ul>
                        <li v-for="d in list">{{d.name}}</li>
                    </ul>
                </div>`,
           
            //props:['title','list']
            //设置props验证
            props:{
                //key(所接收到的数据)
                title:{
                    type:String,
                    // required:true
                    default: 'hello'
                }
            }
        }

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

非父子组件通信

有两种方法：1）使用第三方来处理，new vue()；2）使用vuex 状态管理模式

下面主要讲解使用事件总线来管理

发送方：
- 通过bus.$emit触发事件，并且将数据作为参数发给接收放
- bus.$emit(‘my-send’,val);

接收方：
- 通过bus.$on监听事件，监听时设置回调函数，当事件触发时该回调函数就要调用
- bus.$on(‘my-send’,function(val){ console.log(‘收到了发送方的数据’,val) })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-component1></my-component1>
        <hr/>
        <my-component2></my-component2>
    </div>
    <script src="./vue.js"></script>
    <script>
        /**
         * 非父子：1)使用new Vue()作为事件总线实现各个组件间的通信
         *        2)使用Vuex 状态管理模式实现非父子间的通信
         * 
         * 假设：MyComponent1发送'hello,组件2'给MyComponent2
         */
        const bus=new Vue();//创建空的Vue实例充当事件总线
        /**
         * 发送方：
         *     通过bus.$emit触发事件，并且将数据作为参数发给接收放
         *      bus.$emit('my-send',val);
         * 接收方：
         *     通过bus.$on监听事件，监听时设置回调函数，当事件触发时该回调函数就要调用
         *      bus.$on('my-send',function(val){
         *              console.log('收到了发送方的数据',val)
         *          })
         */

        const MyComponent1={
            template:`<div>
                            <h1>组件1</h1>
                            <button @click="send">发送数据给组件2</button>
                        </div>`,
            data(){
                return {
                    msg:'hello,组件2'
                }
            },
            methods:{
                //发送数据
                send(){
                    bus.$emit('my-send',this.msg);
                }
            }
        }

        const MyComponent2={
            template:`
                <div>
                    <h2>组件2..</h2>
                    <p>{{msg}}</p>
                </div>
            `,
            data(){
                return {
                    msg:''
                }
            },
            created() {
                //接收数据
                bus.$on('my-send',(val)=>{
                    this.msg=val
                })
            },  
        }
        new Vue({
            el:"#app",
            components:{
                MyComponent1,
                MyComponent2
            }
        })
    </script>
</body>
</html>