Vue组件化常用方法之组件传值与通信

2023-07-04 10:07:03 180

父组件传值到子组件

父组件传值到子组件基本方法有三个，分别为：

属性props
引用$refs
子元素$children

日常开发中，我们用到props和$refs频率比较多，$children相对较少些（我就没怎么使用过~）。

属性props

在父组件中添加属性，在子组件中接收使用，例如：

父组件：

子组件：

{{msg}}

props:{
msg:String
}

引用$refs

在父组件中可以使用this.$refs.xxx获取子组件中定义的数据或者方法，并使用。

父组件：



mounted(){
this.$refs.hw.foo="bar";
}

子组件：

{{foo}}

data(){
return{
foo:"foo"
};
}

注意事项：

this.$refs.xxx不能在created生命周期中使用，因为真实的DOM还没有挂载完毕，如果非要想，可以使用vm.$nextTick来访问DOM。或者也可以这样理解，父组件先于子组件创建，在父组件的created生命周期中子组件还没有创建，所以获取不到子组件。

在Vue中组件生命周期调用顺序如下：

组建的调用顺序都是先父后子，渲染完成的顺序是先子后父

组件的销毁操作是先父后子，销毁完成的顺序是先子后父

加载渲染过程

父beforeCreate
父created
父beforeMount
子beforeCreate
子created
子beforeMount
子mounted
父mounted

子组件更新过程

父beforeUpdate
子beforeUpdate
子updated
父updated

父组件更新过程

父beforeUpdate
父updated

销毁过程

父beforeDestroy
子beforeDestroy
子destroyed
父destroyed

created(){
console.log("第一个执行");
console.log(this.$refs.hw);//undefined
this.$nextTick(()=>{
console.log("第三个执行");
console.log(this.$refs.hw);//此时可以获取到
});
}

mounted(){
console.log("第二个执行");
this.$refs.hw.foo="bar";
}

子元素$children

父组件：

this.$children[0].xx="xxx";

注意事项：

$children获取当前实例的直接子组件。如果父组件中存在多个子组件，需要注意$children并不保证顺序，也不是响应式的。

子组件传值到父组件

子组件传值到父组件使用的方法是自定义事件。在子组件中派发，在父组件中监听。

注意事项：事件的派发者是谁，事件的监听者就是谁，只不过声明的时候声明在父组件中了。

分为三种情况：不传递参数、传递一个参数、传递多个参数。

不传递参数

子组件：

this.$emit('childFoo');

父组件：



methods:{
onChildFoo(){
console.log("======onChildFoo========");
}
}

传递一个参数

在父组件中使用$event接收参数。

子组件：

this.$emit('childFooSingle','foo');

父组件：



methods:{
onChildFooSingle(e){
console.log(e);//foo
}
}

传递多个参数

在父组件中使用arguments接收参数，会以数组的形式传递。

子组件：

this.$emit('childFooMultiple','foo','bar','dong');

父组件：



methods:{
onChildFooMultiple(msg){
console.log(msg[0]);//foo
console.log(msg[1]);//bar
console.log(msg[2]);//dong
}
}

兄弟组件之间传值

兄弟组件之间传值可以通过共同的父辈组件搭桥进行传递，例如：$parent、$root。

兄弟组件1：

this.$parent.$on('foo',handle);

兄弟组件2：

this.$parent.$emit('foo');

祖代和后代之间传值

由于组件嵌套层数过多，使用props进行传递不切实际，vue提供了provide/injectAPI完成该任务。

provide/inject能够实现祖先给后代传值。

祖代：

provide(){
return{foo:'foo'}
}

后代：

inject:['foo']

注意：provide和inject主要为高阶组件/组件库提供用例，并不推荐直接用于应用程序代码中，我们更多会在开源组件库中见到。但是，反过来想要后代给祖代传值，这种方案就不行了！！！

官方提示：provide和inject绑定并不是响应式的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的property还是可响应式的。

祖代：

provide(){
return{
dong:this.home
};
},
data(){
return{
home:["Apphome"]
};
}

后代：

inject:["dong"]

this.dong=["Appdata"];//会报错，Avoidmutatinganinjectedvaluedirectlysincethechangeswillbeoverwrittenwhenevertheprovidedcomponentre-renders
this.dong.push("Appdata");//可以修改成功

任意两个组件之间传值

任意两个组件之间传值有两种方案：事件总线、Vuex。

事件总线

创建一个Bus类负责事件派发、监听和回调管理。

首先创建一个bus.js，并在main.js中引入，然后在组件中使用：

第一步：新建plugins/bus.js

classBus{
constructor(){
this.callbacks={}
}
$on(name,fn){
this.callbacks[name]=this.callbacks[name]||[]
this.callbacks[name].push(fn)
}
$emit(name,args){
if(this.callbacks[name]){
this.callbacks[name].forEach(cb=>cb(args))
}
}
}

exportdefaultBus;

第二步：main.js中引入

importBusfrom"./plugins/bus";
Vue.prototype.$bus=newBus()

第三步：在组件中使用

组件1：

this.$bus.$on('foo',handle)

组件2：

this.$bus.$emit('foo')

Vuex

创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更。可以自行先了解一下官方文档Vuex，具体详细使用后续会写一个专题~

总结

到此这篇关于Vue组件化常用方法之组件传值与通信的文章就介绍到这了,更多相关Vue组件传值与通信内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue组件化常用方法之组件传值与通信

相关知识点

父组件传值到子组件

{{msg}}

子组件传值到父组件

兄弟组件之间传值

祖代和后代之间传值

任意两个组件之间传值

总结

随机推荐

Vue组件化常用方法之组件传值与通信

相关知识点

父组件传值到子组件

{{msg}}

子组件传值到父组件

兄弟组件之间传值

祖代和后代之间传值

任意两个组件之间传值

总结

热门推荐

随机推荐