持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情
根据组件之间不同的关系，数据的传递可以分为以下几类：
- 父子组件
- 兄弟组件
- 祖先后代组件
- 任意2个组件之间
1.父子组件
父 -->子
1. props
- props是父传子的单向数据流，反之不可
- 当使用驼峰命名法给属性命名的时候，对应的会自动解析成短横线分隔命名形式（HTML中的属性名对大小写不敏感）
语法：
父组件 Parent
<Child my-name="hello!" />
子组件 Child
props: ['myName']
2. ref
- 获取子组件的
dom元素 - 获取子组件中的data、调用子组件中的方法
- 当
ref和v-for一起使用的时候，子组件获取的是一组数据（数组） - 在使用的时候确保dom已经渲染完成，比如在 mounted() 而不是created()中调用
- ref属性不是响应式的，应避免在计算属性
computed，和模板{{}}中使用
语法：
父组件 Parent：
<Child ref="hello" />
mounted(){
console.log(this.$refs.hello) // 获取子组件的DOM
},
methods: {
sayHello() {
this.$nextTick(() => {
console.log(this.$refs.hello.msg) // 获取子组件的data中的字段
})
this.$refs.hello.print() // 调用子组中的件方法
}
}
子组件 Child：
//
data() {
return {
msg: "子组件对你说了一句hello"
}
},
methods: {
print() { console.log(msg) }
}
3. children / parent
- $children: 父实例访问子组件实例
- $parent: 子实例访问父组件实例
- 注：children不保证顺序，不是响应式。使用props 和 events 实现父子组件通信更佳
语法：
--------父组件 Parent--------
data(){
return{
name: 'hahaha'
}
}
console.log('children:',this.$children) // 访问子组件
--------子组件 Child--------
this.$parent.name = 'lalala' // 访问父组件
-
子 -->父
自定义事件的交互，子组件发送事件，父组件监听事件
语法：vm.$emit( event, data )
子组件 Child
this.$emit('cancel' , '关闭Dialog')
父组件 Parent
<child @cancel="cancelDialog" />
cancelDialog(msg){
console.log(msg); // 输出：关闭Dialog
}
2.兄弟组件
找共同的祖辈$parent、$root
- parent访问最近一级父组件中的内容，parent访问最近一级父组件中的内容，parent访问最近一级父组件中的内容，root访问到根组件
3.祖先后代
祖先-->后代
方法：依赖注入 provide/inject（主要用于组件库的开发）
（允许一个祖先组件向其所有子孙后代注入一个依赖）
4.任意2个组件之间
- 事件总线Bus 创建一个Bus类来负责事件的派发、监听和回调
//main.js
Vue.prototype.$bus = new Vue();
// 组件1 发射事件
$bus.$emit("onMsg", '来自A页面的消息');
//组件2 监听事件
this.$bus.$on("onMsg",()=>{
})
- vuex（常用）
获取：
this.$store.state.count，
在函数中触发变更状态：this.$store.commit('setObj')
