Vue父子组件传值小记

梦想不抛弃苦心追求的人,只要不停止追求,你们会沐浴在梦想的光辉之中。再美好的梦想与目标,再完美的计划和方案,如果不能尽快在行动中落实,最终只能是纸上谈兵,空想一番。只要瞄准了大方向,坚持不懈地做下去,才能够扫除挡在梦想前面的障碍,实现美好的人生蓝图。Vue父子组件传值小记,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

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

一、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是非常好的选择

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/153537.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!