前言:在我们vue项目中组件传值大致可以分为三大类,1、子组件传值给父组件,2、父组件传值给子组件,3、兄弟组件之间传值;

1、父组件传值给子组件:

1.1、定义父组件

//父组件
//引入的add-widget组件
//使用 v-bind 的缩写语法通常更简单:
<add-widget :msg-val="msg"> //这里必须要用 - 代替驼峰
// HTML 特性是不区分大小写的。所以,当使用的不是字符串模板,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名,当你使用的是字符串模板的时候,则没有这些限制 
</add-widget>
data(){
    return {
        msg: [1,2,3]
    };
}

1.2、定义子组件,子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合会报错。
父组件代码:

//子组件通过props来接收数据:
//方式1:
props: ['msgVal']
//方式2 :
props: {
    msgVal: Array //这样可以指定传入的类型,如果类型不对,会警告
}
//方式3:
props: {
    msgVal: {
        type: Array, //指定传入的类型
        //type 也可以是一个自定义构造器函数,使用 instanceof 检测。
        default: [0,0,0] //这样可以指定默认的值, 一把指定默认值为空
    }

	// 或者
	msgVal: {
		type: Array,
		default:function(){
			return:[0,0,0]
		}
	}
}
//注意 props 会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用
注意:父子组件传值,数据是异步请求,有可能数据渲染时报错:
  • 原因:异步请求时,数据还没有获取到但是此时已经渲染节点了
  • 解决方案:可以在父组件需要传递数据的节点加上 v-if = isReady(isReady默认为false),异步请求获取数据后(isReady赋值为true),v-if = isRead

2、子组件向父组件传递数据:

子组件有一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把 “我是子组件传递过去的内容” 这几个字传给父组件。

在子组件中 通过$emit方法传递参数:

在这里插入图片描述

$item有两个参数,第一个是自定义事件,第二个是你要传过去的值

在父组件中:

父组件在组件上定义了一个自定义事件childEvent,事件名为parentEvent用于接受子组件传过来的value值。

在这里插入图片描述
然后,当我点击 子传父按钮时,页面上的值就会发生改变
点击前:
在这里插入图片描述
点击后:
在这里插入图片描述

3、兄弟组件之间传值:

Vue 没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件。如果一定需要子对子传参,可以先从传到父组件,再传到子组件。

或者通过eventBus或vuex(小项目少页面用eventBus,大项目多页面使用 vuex)传值:

这里具体说的是通过事件总线来传值:
大致实现方法:

 var Event = new Vue();       //中心事件的调度剂
    Event.$emit(事件名,数据);     触发当前实例上的事件,并传一个参数       
    Event.$on(事件名,回调函数);     监听event事件后运行 */    
            
   //$emit 相当于一个触发事件,在on_change事件触发后,my_say事件自动触发

在这里插入图片描述
父组件:
在这里插入图片描述
第一个组件:index
在这里插入图片描述
第二个组件: index2
在这里插入图片描述
当index组件中的兄弟传值按钮后,index2组件中的 msg 值随之发生变化:

点击前:
在这里插入图片描述

点击后:

在这里插入图片描述

序言:其实我们也可以创建一个单独的js文件event.js,内容如下
在这里插入图片描述
使用:
在这里插入图片描述
第二个组件中:
在这里插入图片描述
最后,在总结一下兄弟组件传值的流程:

  • 1、兄弟之间传递数据需要借助于事件总线,通过事件总线的方式传递数据
  • 2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。
  • 3、通过 $emit 发射出事件,触发当前实例上的事件,并传一个参数
  • 3、$on监听event事件后运行,通过一个事件触发bus.on(事件名,function(接收数据的参数){用该组件的数据接收传递过来的数据}),此时函数中的this已经发生了改变,可以使用箭头函数。

其实传值还可以通过 vuex 和设置 Session Storage缓存的形式进行传递

const orderData = { 'orderId': 123, 'price': 88 } 
// 存值
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))
// 取值  (在另一个组件取出)
const dataB = JSON.parse(sessionStorage.getItem('缓存名称'))

这次有点长,但是绝对是也是一篇好文章,谢谢!。

Logo

前往低代码交流专区

更多推荐