Vue 父子组件之间的通信

 

组件之间的通信分为2种

• 父子组件之间的通信
• 非父子组件之间的通信

 

 

父组件向子组件传数据

　　 <div id="app"></div>
    
    
    <script>
        // 子组件
        Vue.component('Child',{
            template:`<p>我是子组件，接收到父组件传来的数据：{{msg}}</p>`,  //{{ }}使用数据
            props:['msg']  //在props中用msg属性|变量来接收父组件传来的数据
        })
    
        // 父组件
        Vue.component('Parent',{
            template:`
            <div>
                <p>我是父组件</p>
                <child msg='hello'></child>   <!--使用子组件。使用属性向子组件传递数据，子组件要用同名的变量来接收-->
            </div>
            `
        })
        
            
        new Vue({
            el:'#app',
            template:`<parent></parent>`  //使用父组件
        });
        
    </script>

如果要传递多个数据，使用多个属性即可。

 

 

 

子组件向父组件传数据

　　 <div id="app"></div>
    
    
    <script>
        // 子组件
        Vue.component('Child',{
            template:`
            <div>
                <p>我是子组件</p>
                 <!-- @click='sendToParent',表示这个元素发生click事件时，就调用sendToParent()方法 -->
                <button @click='sendToParent'>发送数据给父组件</button>  <!-- @事件,事件可以是预定义的，也可以是自定义的 -->
            </div>`, 
            methods:{
                sendToParent(){
                    this.$emit("received","hello");  //this.$emit("自定义的事件名",数据)，表示当前组件触发指定事件，这个事件会携带指定的数据
                }
            }
        })
    
    
        // 父组件
        Vue.component('Parent',{
            template:`
            <div>
                <p>我是父组件，这是子组件传来的数据：{{msg}}</p>  <!--使用msg变量-->
                 <!-- 使用子组件。发生received事件时，使用指定的方法来处理 -->
                <child @received="receivedFromChild"></child>  
            </div>
            `,
            data(){
                return{
                    msg:''
                }
            },
            methods:{
                receivedFromChild(val){  //使用一个参数来接收数据
                    this.msg=val;   //将数据赋给data中的msg变量
                }
            }
        })
        
            
        new Vue({
            el:'#app',
            template:`<parent></parent>`  //使用父组件
        });
        
    </script>

 

 

@事件=''，事件可以是预定义的，也可以是自定义的。

处理方式可以写自定义函数，比如 @click='send' ，也可以写成 @click='send()'  。函数可以带参数，比如 @click='send("chy",1)' 。

处理方式也可以直接操作内存中的变量，比如 @click='msg+=1' ，msg是内存中的变量，能识别，

如果是 @click='alert(1)' 这种函数，识别不了，报错：alert()  undefined

 

 

 

说明

　　 <div id="app"></div>
    
    
    <script>
        // 子组件
        Vue.component('Child',{
            template:`
            <div>
                <p>我是子组件</p>
                <!--发送时可以带参数-->
                <button @click='sendToParent("chy",20)'>发送数据给父组件</button>
            </div>`, 
            methods:{
                sendToParent(val1,val2){  //对应的函数自然要声明参数
                    this.$emit("received",val1,val2);  //可以带0个、1个、多个数据，带多个时逗号分隔即可。这些数据可以使用传进来的参数、表单字段的值等
                }
            }
        })
    
    
        // 父组件
        Vue.component('Parent',{
            template:`
            <div>
                <p>我是父组件，这是子组件传来的数据：{{msg1}}    {{msg2}}</p>
                 <!-- 注意：接收时不能带参数表，带参数表反而会出错 -->
                <child @received="receivedFromChild"></child>  
            </div>
            `,
            data(){
                return{
                    msg1:'',
                    msg2:''
                }
            },
            methods:{
                receivedFromChild(val1,val2){  //传来几个数据，就用几个参数接收
                    this.msg1=val1;   
                    this.msg2=val2;  
                }
            }
        })
        
            
        new Vue({
            el:'#app',
            template:`<parent></parent>` 
        });
        
    </script>