vue2.0嵌套組件之間的通信（$refs，props，$emit）

vue的一大特色就是組件化，所以組件之間的數據交互是非常重要，而我們經常使用組件之間的通信的方法有：props,$refs和emit。

初識組件之間的通信的屬性和方法

props的使用

子組件使用父組件的數據，使用vue的屬性props。

當我們在父組件parent里面嵌套一個子組件son的時候，如果我們需要使用父組件的數據的時候，我們可以在子組件標簽上面綁定一個屬性，然后在子組件里面通過props來調用這個屬性，就可以使用這個數據了。

//父組件
 
<sonPart :list="listDate"></sonPart>
 
//子組件
 
<div>{{list}}</div>
export default{
  props:["list"] 
}

props的數據類型

1，數組：當我們簡單使用數據的時候，這時候props可以是一個數組的類型

props: ['list1','list2'.....]

2，對象：當我們要設置所使用的數據的類型、默認值等的時候，props就可以是一個Object類型

props: {
  list1: {
    type: Number/String/Boolean/Array/Object,   //類型
    default: function (){return},   //默認值
    required: true/false     //是否必填
  }  
}

$refs

vue有一個$refs屬性，當只是組件的內容的時候，可以通過這個屬性獲得DOM元素，對這個DOM進行操作；如果是這個組件的子組件的時候，可以通過這個屬性獲得這個子組件對象，就可以訪問這個組件里面的data與methods里面的內容了。（這時候取得子組件的數據一般是靜態的）

$refs的使用

在DOM標簽或者組件標簽的時候，添加一個ref屬性，ref="name"。

添加這個屬性后，就可以通過this.$refs.name獲得這個DOM元素或者子組件

//父組件
 
<son ref="children"><son>
 
export default {
  mounted: {
   //這時候就可以獲得了這個子組件
    let son = this.$refs.children
    }
}

$emit

當父組件獲取的數據，需用通過子組件來動作（click、change等）改變后數據，這時候我們通過ref是獲取不到的，獲取的也是改變前的數據。

因為emit綁定的事件觸發的時候，附加參數都會傳給監聽器回調。所以數據就會改變

//父組件
 
//template部分
<sonPart @getList="enter"></sonPart>
 
//js部分
import sonPart from './sonPar.vue';
export default{
 data () {
   radioData: ''
  },
  methods:{
    enter:function(value){
      this.radioData = value
    }
  }，
   components: {sonPart} 
}
//子組件
 
<form @change="getData">
  <label><input type="radio" v-model="dataList" value="0" name="list1">one</label>
  <label><input type="radio" v-model="dataList" value="1" name="list1">two</label>
</form>
 
export default{
  data () {
    dataList:''
  },
  methods:{
    getData:function(){
      this.$emit("getList"，this.dataList);
    }
  }  
}

$emit的參數

當我們使用的emit的時候，第一個參數為父組件使用方法名，后面一個參數為傳遞的數據。當數據有幾個的時候，可以使用對象的形式傳遞參數。

methods: {
  getData: function() {
    this.$emit("getList",{name: this.dataList,value:"leo"[,....]}
  }
}

站在巨人的肩膀上摘蘋果:

https://blog.csdn.net/weixin_33813128/article/details/94177294

https://www.jb51.net/article/140581.htm