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