Vue父子组件通信总结
感觉Vue中父子传参的方式，实在是太多了，于是做一个小总结，只是总结我所知道的。
1.父传子
基本就用一个方式，props
父亲通过在 标签 中写入需要传入的数据。
我是爸爸，下面是儿子
儿子在 实例中的
props 选项中获取//son.vue
export default {
name:'son',
props:{
selected:{
type:Boolean
},
title:{
type:String
}
}
}
2.子传父
#
update:my-prop-name 模式
Vue 是单项数据流，所以不允许 儿子 直接修改父亲的数据，也不允许儿子直接修改自己的props。假设一个情况，点击儿子，儿子需要改变
selected 的状态。儿子方面
触发点击事件后， 让儿子触发一个
update 事件，把新的 selected 传出去
title:{{title}} selected:{{selected}}.son {
border: 1px solid red;
}父亲方面
在标签中监听
update事件，并将传过来的 $event付给 selected，这样就完成了一次传参。
我是爸爸，下面是儿子简单方式
.sync 修饰符
我是爸爸，下面是儿子
# $parents API 儿子方面
从
this.$parent中可以获取到 父组件 的 data 数据 ，直接进行修改，是不是很刺激。methods: {
onClick() {
this.$parent.selected = !this.$parent.selected;
}
}
虽然刺激，但是，我建议调用父组件的函数，来切换状态。
父亲方面
//father.vue
export default {
name: "father",
components: {
Son
},
data() {
return {
selected: true
};
},
methods: {
changeSelected() {
this.selected = !this.selected;
}
}
};
【Vue父子组件通信总结】儿子方面
//son.vue
methods: {
onClick() {
this.$parent.changeSelected();
}
}
# EventBus 如果只是一个父亲，一个儿子上面的方法非常的简单实用，但是如果是祖孙三代传参呢？上面的方法就很麻烦了。
具体怎么麻烦，可以看一下我的这篇文章，用原始的方法造 tabs轮子:https://zhuanlan.zhihu.com/p/39601572
废话不多说，开始用 EventBus做一个简单的 tabs组件。
#app.vue
新闻
汽车
代码 新闻列表
汽车列表
代码列表
# tabs.vue
# tabs-item.vue
.active {
color: red;
}# tab-pane.vue
.pane {
color: red;
}# 灵活运用 provide inject
//father.vue
export default {
name:'father',
data(){
return {
someThing:'father'
}
},
provide(){
return {
father:this
}
}
}
//son.vue
export default {
name:'son',
inject:['father'],
methods:{
onClick(){
this.father.someThing = 'son'
}
}
}
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- 动态组件与v-once指令
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- (六)Component初识组件
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)