vue组件传值

vue组件传值：

1.父传子：

在父组件的子组件标签上通过v-bind绑定要传递的数据，然后在子组件内部通过props接收

// 父组件
<select-list :dataList="dataArr" @parentReceive="changeVal"/>
    
// 子组件
props: ['dataList']    

2.子传父：

在子组件中定义一个方法，然后在方法里面通过this.$emit进行传递($emit有两个参数(自定义事件名称，要传递的数据))：

// select-list组件 - 子组件
selectVal (val) {
      // 第一步
      this.$emit('parentReceive', val) // 第一个参数：自定义事件名称；第二个参数要传递的数据
}

在父组件的子组件标签上通过@自定义事件名称监听，然后通过回调函数去处理响应的逻辑：

// 父组件
<template>
	<select-list :dataList="dataArr" @parentReceive="changeVal"/>
 </template>

 <script>
 	 changeVal (val) {
      console.log(`我是子组件传递过来的数据${val}`)
    }  
 </script>

3.中央通讯（跨组件通信）：

在要传递数据的组件通过$emit(自定义事件名称，要传递的数据)：

// select - list
import bus from '../../main'
selectVal (val) {
      bus.$emit('reveive', val)
    }

在目标组件通过$on进行监听接收$on(‘自定义事件名称’, 回调函数)：

// select - input
import bus from '../../main'
bus.$on('reveive', val => {
      console.log(val)
      this.value = val
 })

$emit 和 $on都要挂载到Vue空实例上，而这个空实例要全局使用因此需要在main.js创建：

// main.js
let bus = new Vue()
export default bus