Vue2.0组件通信(非Vuex)
2023-09-27 14:28:58 时间
叙
最近学了Vue
2.0,写写自己的一点总结,关于父子组件通信的,这点对于我来说,是看文档的时候比较难理解的。通过网上找资料和实践,也有一点理解。
例子使用以下代码模板
<script src="https://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<div id="app">
<!--父组件-->
<p>{{total}}</p>
<child @add="incrementTotal" ref="childTest" :num-a="total" num-s="total"></child>
<button type="button" @click="clickref">调用子组件</button>
</div>
<!--子组件-->
<template id="myChild">
<button @click="add">{{counter}}</button>
</template>
<script>
new Vue({
el:'#app',
data :{
total: 1
},
methods:{
incrementTotal : function(){
},
clickref:function(){
}
},
components:{
'child' :{
template:'#myChild',
data : function(){
return{
counter : 0
}
},
props:['numA','numS'],
methods:{
add : function(){
}
}
}
}
});
</script>
父组件传数据给子组件
当子组件需要父组件传递的数据时,子组件要设置props
,来接收父组件传递过去的值。
在这里父组件传递的是total
,子组件设置props
是[numA,numS]
,接着在调用子组件的时候将父组件的数据传递过去,如下
<child :num-a="total" num-s="total"></child>
这样就可以子组件'child'就能接收到父组件(也就是挂载在 app
上的)的数据。
关于props的写法有多种,具体请看官方文档
父子通信-动态数据
有时候我们想实现父组件的数据能动态的传递给子组件,使用v-model
来实现
<input v-model="total">
<child :num-a="total">
<!--props的另外一种写法-->
<scirpt>
...
props: {
numA: [String, Number]
}
</script>
子组件与父组件通信
有时候我们想要实现子组件调用父组件,那要怎么做呢?
我们可以通过触发事件来通知父组件改变数据。
父组件:
<div>
<child @add="incrementTotal" :num-a="total"></child> //监听子组件触发的add事件,然后调用incrementTotal方法
</div>
methods: {
incrementTotal() {
this.total +=1
}
}
子组件:
components:{
'child' :{
template:'#myChild',
data : function(){
return{
counter : 0
}
},
props:['numA','numS'],
methods:{
add : function(){
this.counter +=1
this.$emit('add') //子组件通过 $emit触发父组件的方法add
}
}
}
}
子组件执行add方法 => 触发$emit => 触发父组件add方法 => 执行 incrementTotal 方法 => 完成
父组件调用子组件
通过给子组件设置ref
,可以很方便的获取到子组件,然后改变子组件。
<child @add="incrementTotal" ref="childTest" :num-a="total" num-s="total"></child>
new Vue({
el:'#app',
data :{
total: 0
},
methods:{
incrementTotal : function(){
this.total += 1
},
clickref:function(){
let childRef = this.$refs.childTest //获取子组件
childRef.counter = 1221 //改变子组件的数据
childRef.add(11) //调用子组件的方法
}
},
components:{
'child' :{
template:'#myChild',
data : function(){
return{
counter : 0
}
},
props:['numA','numS'],
methods:{
add : function(num){
this.counter +=1
this.$emit('add')
console.log('接收父组件的值':+ num)
}
}
}
}
});
子组件与子组件通信
如果2个组件不是父子组件那么如何通信呢?
这时可以通过eventHub来实现通信,
所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。(或者使用vuex)
let eventHub = new Vue(); //创建事件中心
组件1触发:
<div @click="eve"></div>
methods: {
eve() {
eventHub.$emit('change','hehe'); //eventHub触发事件
}
}
组件2接收:
<div></div>
created() {
eventHub.$on('change', () => { //eventHub接收事件
this.msg = 'hehe';
});
}
这样就实现了非父子组件之间的通信了,原理就是把Hub当作一个中转站!
总结
例子代码:JSFiddle
参考:vue2.0父子组件以及非父子组件如何通信
相关文章
- [转] React 中组件间通信的几种方式
- React组件属性部类(propTypes)校验
- Vue 非父子组件之间的通信
- SpringCloud微服务(06):Config组件,实现配置统一管理
- CDH各组件
- Vue - 兄弟组件通信(eventBus)
- 微信小程序组件 分页菜单点击请求
- Vue组件间的通信方式(多种场景,通俗易懂,建议收藏)
- React学习笔记 -- 组件通信之路由传参(react-router-dom)
- Swift - 使用UI Dynamics给UIKit组件添加重力和碰撞行为
- SwiftUI 实战之现代感日期选择组件(UIDatePicker 教程含代码)
- Maven中央仓库正式成为Oracle官方JDBC驱动程序组件分发中心
- SwiftUI 代码速查之 05 常用错误显示组件 ErrorView
- Vue知识点总结(11)——组件通信-父传子(超级详细)
- 微信小程序如何使用pubsub-js实现组件间实时通信以及如何搭建Vant框架【npm包搭建介绍】
- react兄弟组件通信之pubsub-js
- 浅析setup如何通过ref获取子组件实例中的DOM结构/数据/方法及获取子组件实例数据都是空的处理(defineExpose API 的使用)、Vue3模板引用refs、在组合式API中使用template refs、for循环中如何获取及重置refs、如何监听模板引用
- vue组件间高级通信
- 【快应用】text组件里的文字很多,旁边的div样式会被拉伸如何解决
- 组件通信 Provide&&inject
- vue3:兄弟组件,跨组件传值,事件总线的通信方式(mitt / tiny-emitter)