vue父子传值与非父子传值

微信扫一扫,分享到朋友圈

vue父子传值与非父子传值

大概梳理下传值的几种方式

一:父子组件传值

  1. props方式

子组件对外暴露方法并向父组件传递由于触发方法导致的值的变化,父组件接收子组件传递来的值;子组件接收父组件传递来的值,并根据传递来的值在子组件内部进行各种操作

Tips:子组件只能接受值和发射(状态)值,父组件不能操作子组件的方法和属性

仅适合传入数据

  1. $parents与$children方式

可操作父组件或子组件方法及属性,但不推荐

1. $parent : 当前组件树的根实例,如果没有则是该组件树本身

用于子组件获取父组件实例并操作父组件属性和方法;

高组件化开发环境下不建议使用, 高耦合度 ,不易复用;

2. $children:当前实例的 **直属** 子组件集合

以数组方式存在,数组内子组件成员可能会因为增减组件导致下标发生偏移;

不保证顺序,非响应式,仅可拿到子组件下标;

若有需要,推荐使用for…of遍历子组件实例;

在需要拿到所有子组件时才用到, 日常不建议使用

  1. $refs与ref方式

用于调用子组件的属性和方法,默认空对象;

最常用;

应该在父组件内给子组件本身添加ref;

this.$refs的意义:该vue实例下的有ref标识的子组件的合集,可以直接通过this.$refs.ref.data/methods来调用子组件数据或方法;

为确保子组件完全挂载完毕,应在mounted生命周期内或者使用this.$nextTick()回调来操作子组件的方法或属性;

语法: this.$refs.ref

二:非父子组件传值

  1. $root: 访问VUE根组件

略略略

  1. $emit 与 $on

该方法可以直接实现两个页面间传值,而不拘泥于是否是父子关系

该方式需要新建一个js文件作为载体, 由该文件对象负责传递数据;

// 公共文件 pub.js
import Vue from 'vue'
let pub = new Vue()
export default pub
//至此,公共文件创建完毕

假设页面a发送数据,页面b接收数据:

页面a,页面b均需要导入文件pub.js

//页面a

import Pub from '../utils/public.js'
export default {
data(){
pageA:'我是页面a的数据'
},
methods:{
emitPub(){
Pub.$emit('goThere',pageA)
}
}
}

//页面b

import Pub from '../utils/public.js'
export default {
data(){
pageB:''
},
mounted(){
//需要在组件加载完毕后使用
//res: 页面a发射的数据
Pub.$on('goThere',res=>{
this.pageB = res
})
}
}

tips: 经试验,$on的参数二如果是普通函数,this指向会发生错误,因而推荐使用箭头函数(这是由于箭头函数下的this继承了所处函数的上下文环境,妙蛙)

以上

微信扫一扫,分享到朋友圈

vue父子传值与非父子传值

全面升级投放和营销能力 华为应用市场商业推广助力开发者高效增长

上一篇

项目1 day03

下一篇

你也可能喜欢

vue父子传值与非父子传值

长按储存图像,分享给朋友