【原】vue單文件組件互相通訊

在vue中，我們可以把一個頁面各個部分單獨封裝起來，做成各種小組件，然后加載，這樣的好處是代碼維護起來比較容易，重復的代碼多處調用！

在一個vue項目中，單文件組件以.vue形式文件命名

每個組件之間，都能建立起關聯,然后最后通過webpack打包編譯就好

下面有兩個組件a.vue和b.vue

 <h5>我是a組件</h5> <button @click="et">點我</button> <h2>{{number}}</h2> </div> </template> <script> import Vue from 'vue';//引入vue.js文件 export default { //props 接受父組件的數據，number  props:['number'], data () { return{ hello:"你好，我是a組件" } }, methods: { et() {
 this.$emit('my-dd',this.hello); } } } </script> 

$emit命令簡介

官方解釋大致的意思是監聽回調

下面這張圖，充分說明$emit到底在組件通訊中，做啥的！

 

從這種圖看出

子集向父集傳輸，用emit

父集向子集傳輸，用props

我們在按鈕里面有個點擊事件<button @click="et">點我</button>

在我們vue里面，基本所有的函數處理都放在一個函數處理器里面，這里我們可以連接上下文

這個東西就是vue內置的methods

在methods里面我們有一個定義的函數et

 

et() {
　　this.$emit('my-dd',this.hello);
}

我們監聽了一個叫做my-dd的東西，我們先不要管他是什么，然后后面，跟了一個參數this.hello

下面我們來看組件b.vue(也就是我們定義的a.vue的父組件)

<template>
  <div>
    <h5>b組件</h5>
    <!-- 自定義屬性大小寫不敏感，通過下划線定義 -->
    <c-a :number="datas" @my-dd="dd"></c-a>
    <!-- 通過is標簽，把組件放到p標簽里面 -->
    <!-- <p :is="compontder"></p> -->
  </div>
</template>
<script>
import Vue from 'vue';
import CA from "./a";
export default {
  data () {
    return{
      hello:"你好，我是組件b",
      compontder:"c-a",
      datas:[
        {name:"父組件1"},
        {name:"父組件2"},
        {name:"父組件3"}
      ]
    }
  },
  methods: {
    dd(s) {
    console.log(s);
   }
  },
  components:{
    CA
  },
}
</script>

下面我們可以看到b.vue里面我們定義了一個屬性@my-dd，這里就是我們子組件a.vue里面監聽的東西了

this.$emit('my-dd',this.hello);

現在知道了吧。子組件監聽的是父組件的屬性

父組件my-dd里面綁定的是一個dd的函數，並且打印參數console.log(s)

里面就是打印了子組件的this.hello

然后我們來看一下組件引入，

import CA from "./a";

我們需要在一個在vue內置的一個components注冊

components：{
　　CA //代表注冊了CA組件，可以在頁面用這個組件了
}

 <c-a :number="datas" @my-dd="dd"></c-a>

這就是引用子組件a.vue了

並且向子組件傳遞了一個屬性number="datas"

也就是我們的數據datas

我們在子組件中接收到了

props:['number']接收

在這里，我們知道了子組件，父組件之間的通訊了