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>