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