vue單文件組件形成父子（子父）組件之間通信（vue父組件傳遞數據給子組件，子組件傳遞數據給父組件）

看了很多文章，官網文檔也有看，對父子組件通信說的不是很明白；決定自己總結一下；

vue一般都使用構建工具構建項目；這樣每個組件都是單文件組件；而網上很多文章都是script標簽方式映入vue，組件通信也是在一個文件中進行；

單文件組件形成的父子關系組件之間的通信的文章還沒看到 。看到掘金和博客園的兩篇文章決定自己寫一個單文件組件之間通信

一般來說想比較少的數據可以通過事件發射和屬性傳遞來形成數據的傳遞。

下面上代碼；

 

 

1：父到子組件通信

//父組件通過標簽上面定義傳值
<template>
    <Main :obj="data"></Main>  //這個是子組件  綁定屬性
</template>
<script>
    //引入子組件
    import Main form "./main"
    
    exprot default{
        name:"parent",
        data(){
            return {
                data:"我要向子組件傳遞數據"
            }
        },
        //初始化組件
        components:{
            Main
        }
    }
</script>

//子組件通過props方法來接收數據  這里props可以寫成對象形式
props:{
       type:'' //規定傳遞值的類型
       default:''  //默認值
}

<template>
    <div>{{data}}</div>  //這是父組件傳遞過來的數據
</template>
<script>
    exprot default{
        name:"son",
        //接受父組件傳值
        props:["data"]
    }
</script>

 

 

2：子組件到父組件

//子組件 Child
<template>
      <button @click='sendmsg'>sendmsg</button>  //子組件綁定事件
      
</template>

<script>

export default {
  data(){
       return {
            info:'this is a msg'   //這是需要傳遞的數據
        }
    },
  methods:{
         sendmsg(){
               this.$emit('info',this.info); //發射info事件
           }
    }
}
</script>


//父組件

<template>
  <div>
         <Child @info='get'></Child>    //監聽子組件emit過來的事件
     </div>
</template>

<script>
import Child from './child'

export default {
  data(){return {
    msgPrent:'hellos'
}},
  methods:{
      get(msg){
            this.msgPrent = msg
       }
    }
  
}
</script>

　　

 

 

參考文章鏈接：

https://www.cnblogs.com/yesyes/p/6619082.html

https://juejin.im/post/5aa00229f265da239b40fc02

https://blog.csdn.net/heartandthink/article/details/74558073

 

總結:vue的組件作用域都是孤立的，不允許在子組件的模板內直接引用父組件的數據。必須使用特定的方法才能實現組件之間的數據傳遞。  
      1:父組件向子組件傳遞數據:  
              在vue中,可以使用props向子組件傳遞數據  
        1): 子組件在props中創建一個屬性,用於接收父組件傳過來的值  
        2): 父組件中注冊子組件  
        3): 在子組件標簽中添加子組件props中創建的屬性  
        4): 把需要傳給子組件的值賦給該屬性  
          
      2:子組件向父組件傳遞數據:  
              子組件主要通過事件傳遞數據給父組件  
        1):子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件  
        2):將需要傳的值作為$emit的第二個參數,該值將作為實參傳給相應自定義事件的方法  
        3):在父組件中注冊子組件並在子組件標簽上綁定對自定義事件的監聽  
          
      3:子組件向子組件傳遞數據  
        vue沒有直接子組件對子組件傳參的方法,建議將需要傳遞數據的子組件，都合並為一個組件.  
         如果一定需要子組件對子組件傳參,可以先傳到父組件,再傳到子組件，為了便於開發,vue推出了一個狀態管理工具vuex，  
         可以很方便的實現組件之間的參數傳遞。