vue的传值

vue的传值：

1.父传子：

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

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

12345

2.子传父：

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

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

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

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

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

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

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

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

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

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

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

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

利用vuex来传递参数

首先是在vuex中state中定义好一个属性名

state:{
  value:""
}

在一个组件中写

methods:{
  sendvalue(){
	this.$store.dispatch("send","value")
}
}

在vuex中写

actions:{
  send(context,valuename){
    this.context("sendover",valuename)
  }
}
mutations:{
  sendover(state,valuename){
    this.state.value=valuename
  }
}

另一个组件中接受

var a = this.$store.state.value