elemntui 父子件传值 父子组件传值

Vue父子组件传值小记

• 组件传值的几种比较实用常见的方式

• 一、props父->子传值

• 1、父组件向子组件传值思路：
• 2、父组件向子组件传值实现：

• 01、引入：
• 02、注册：
• 03、定义待传递的全局变量：
• 04、使用：
• 05、子组件使用：

• 二、emit子->父传值

• 1、思路：
• 2、实现：

• 01、子组件定义函数：
• 02、父组件接收：

• 001、父组件引入子组件：
• 002、父组件使用子组件：

• 三、bus同级传值

• 1、思路
• 2、实现

• 01、在main.js中挂载
• 02、在组件中使用——发送方
• 03、在组件中使用——接收方

• 四、记录在全局变量中保存

组件传值的几种比较实用常见的方式

一、props父->子传值

1、父组件向子组件传值思路：

在父组件中引入子组件，然后用标签对的形式使用子组件，同时将父组件的值传给子组件。

2、父组件向子组件传值实现：

01、引入：

import sonComponent from "./sonComponent";

02、注册：

components:{
	sonComponent 
}

03、定义待传递的全局变量：

data(){
	return {
		values: 'hello'
	}
}

04、使用：

<son-component :values="values" />

05、子组件使用：

不用任何额外声明，直接this.调用即可

二、emit子->父传值

• 注意：emit只能向父组件的自定义事件传值，不能像props那样灵活

1、思路：

一般来说，子组件向父组件用emit传值是通过函数实现的，所以，首先定义一个事件，当事件触发时，子组件向父组件发起emit

2、实现：

01、子组件定义函数：

子组件：

data(){
	return {
		msg: 'hello'
	}
},
methods:{
	testEmit(){
		// parentFunction是父组件用于接收数据的函数的函数名
		this.$emit('parentFunction',this.msg)
	}
}

02、父组件接收：

001、父组件引入子组件：

import sonComponent from './sonComponent'
components:{
	sonComponent
}

002、父组件使用子组件：

<son-component @parentFunction="updateMsg"/>

methods:{
	updateMsg(data){//触发子组件城市选择-选择城市的事件
      alert(data)
    }
}

三、bus同级传值

1、思路

引入一个中间量，专门用于在平级组件之中收发数据

2、实现

01、在main.js中挂载

Vue.prototype.bus=new Vue()

此时，bus作为中间量，承担了运送数据的功能，就像一量公交车，所以也被形象的称为bus。把bus挂载到vue原型上，即可在所有组件中使用

02、在组件中使用——发送方

this.bus.$emit("toBrother", this.msg);

把上述代码放置在你的触发函数中即可

03、在组件中使用——接收方

data(){
	return {
		getMsg: ''
	}
},
beforeCreate(){
	this.bus.$on("toBrother", msg => {
      this.getMsg = msg;
    });
}

• 总结一下，这种方法有点像键值对，"toBrother"是主键，根据这个主键取值

四、记录在全局变量中保存

这种方法就不用过多介绍了，存在cookie里，localStorage里，或者Vuex里面，都可以实现组件之间共享数据。如果项目规模较大，那么Vuex是非常好的选择