vue之间的数据传递（父传子、子传父、兄弟传值）

vue之间的数据传递

首先，我们先建立三个页面:主页面parent.vue、子页面son1.vue、子页面son2.vue。
主页面配置如下：
1.在主页面中引入子页面

import son1 from "@/son1"
import son2 from "@/son2"

2.在components中注册

components: {
	son1,
	son2
}

3.插入子页面

<son1></son1>
<son2></son2>

进入正题

一、父传子

首先在主页面data中定义一个list数据

data(){
	return{
		list:[
			{id:1,name: "小明",age: 10, sex: "男"}
		]
	}
}

1.传递数据

<son1 :parentData="list"></son1>

注意： :后边跟子界面接收的名字,双引号中是需要传过去的名字

2.子页面son1接收数据

props: [
	'parentData'
]

二、子传父
1.在子页面中定义一个事件

<el-button type="primary" @click="updateBtn(item.id)">确 定</el-button>

2.在methods写入方法

methods: {
    updateBtn(id) {
      this.$emit("update-data", id);
　　}
}

注意：$emit括号中第一个参数是父组件需要接收的事件名字，第二个参数是需要传递的数据
3.主页面接收

<son1 :list="list"  @update-data="updateData"></son2>

注意：接收数据用@，第一个值是子页面定义的名字，引号中是当前页面定义的事件名，通过事件传递，获取到数据

三、兄弟之间传值
首先在main.js中定义一个方法

Vue.prototype.方法名 = new Vue()

1.子页面1（son1）

<el-button type="primary" @click="updateBtn(item.id)">确 定</el-button>
methods: {
    updateBtn(id) {
          this.public.$emit("update-data", id);
    }
}

注意：定义一个事件，使用this.public.$emit(“第二个页面需要接收的名字”，“第二个值是传的数据”) 传入数据

2.子页面2（son2）
在created中接收数据

created(){
    This.public.$on(‘update-data’, value=>{
        console.log(value)  //获取数据
    })
}  

注意：this.public.$on(“第一个上个页面定义的名字”，“第二个是一个函数（参数1：上个页面传过来的数据）”)