父子组件间的通讯

因为vue进行组件开发时候，允许组件进行嵌套，因此父子组件需要进行通讯来获取父组件或子组件中的数据。

父传子

父组件给子组件传数据通过在子组件的标签上绑定属性，将数据绑定给某个属性

子组件要获取父组件传过来的信息，必须在内部定义props属性

子组件标签上：

:c-message="message"

子组件内部定义porps：

数组写法

props:['cMessage']

对象写法

props:{
   cMessage:String//数据类型限制
}

最全的设置写法

props:{
    cMessage:{//数据名称为驼峰，因此在绑定属性时要这样写=>:c-message="message" 差值写法不用变=>{{cMessage}}
    type:String,//类型限制 多种类型时=>type:[String,Number]
    default:'默认内容',//如果没有传值时的默认值
    // 当type是数组或对象时，default必须是一个函数，并且返回一个数组或对象
    //default:function(){ return []  }
    required:true//是否必须传值，true时必须传值
  }
}

子传父

子组件给父组件传数据通过在子组件的标签上绑定自定义事件监听，监听子组件是否发送播报

子组件要发送播报，必须通过$emit函数

子组件标签上：

@li-emit="getEmitEvent"

子组件内部使用$emit：

内部template：

<li v-for="item in list" @click="eventEmit(item)">{{item.id}}-{{item.name}}</li>

内部methods：

methods:{//子组件方法
  eventEmit:function(item){
    //通过组件的$emit 自定义事件并发送给父组件 $emit(事件名，传递的参数)
    this.$emit('li-emit',item)
  }
}

父组件内部获取子组件的数据

methods:{//父组件的方法
  getEmitEvent:function(item){//获取子组件传来的数据
    alert(item.name)
  }
}

标签：通讯,cMessage,父子,item,props,组件,message,emit
来源： https://www.cnblogs.com/chujunqiao/p/11625547.html