在vue中组件通信方式可分为3种：父==>子、子==>父、兄弟==>兄弟（非父子）
/*
组件中的通信方式，可以分为
父==>子：
1、通过props传值
2、ref通信
3、$children通信
子==>父：
1、自定义事件this.$emit()
兄弟==>兄弟：
1、$parent
2、事件总线通信eventBus
3、provide/inject
4、vuex通信
*/
1、父==>子（通过props传值）
父组件
<template>
<div>
<Son msg='小溪流'/>
</div>
</template>
子组件
<script>
export default {
props: {
msg: String,
required: true,
default："xxl",
},
}
</script>
2、父==>子（通过ref通信）
父组件
<template>
<div>
<Son ref="son"/>
</div>
</template>
<script>
export default {
mounted() {
console.log('在父组件中获取子组件的data', this.$refs.son.sonMsg) //我是son
this.$refs.son.dosomething() //父组件触发了我
},
}
</script>
子组件
<script>
export default {
data() {
sonMsg:"我是son"
},
methods:{
dosomething(){
console.log("父组件触发了我")
}
}
}
</script>
3、父==>子（通过$children通信）
父组件
<template>
<Son ref="son"/>
</div>
</template>
<script>
export default {
mounted() {
//*注意子组件$children不存在组件顺序
console.log('在父组件中获取子组件的data', this.$children[0].sonMsg) //我是son
},
}
</script>
子组件
<script>
export default {
data() {
sonMsg:"我是son"
},
}
</script>
4、子==>父（通过自定义事件this.$emit）
父组件
<template>
<Son @change="tochangeMsg"/>
</div>
</template>
<script>
export default {
data(){
Msg:"我是parent",
},
methods:{
tochangeMsg(val){
this.Msg = val
console.log(this.Msg) //我是parent-update
}
}
}
</script>
子组件
<template>
<div >
<button @click="changeMsg">去改变父组件中的Msg</button>
</div>
</template>
<script>
export default {
methods:{
changeMsg(){
this.$emit("change","我是parent-update")
}
}
}
</script>
5、兄弟==>兄弟（通过$parent）//本质也是利用eventBus
父组件
<template>
<div>
<Son1 />
<Son2 />
</div>
</template>
子组件
<template>
<div class="son_2">
<button @click="toChangeSon_1">点我$parent通信</button>
</div>
</template>
<script>
export default {
methods: {
toChangeSon_1() {
this.$parent.$emit('changeBrother','son_2中的data')
},
},
}
</script>
子组件
<template>
<div class="son_1">
<button @click="toChange">点我改变父组件</button>
</div>
</template>
<script>
export default {
mounted() {
this.$parent.$on('changeBrother', (val) => {
console.log('son_2组件传递的值', val) //son_2中的data
})
},
}
</script>
6、兄弟==>兄弟（通过eventBus事件总线）
新建event-bus.js文件（在src文件夹下）
//也可通过main.js中挂载到prototype上
import Vue from 'vue'
export const EventBus = new Vue()
随机组件son_2(son_2向son_1传值)
<template>
<div class="son_2">
<button @click="toChangeSon_1">点我$parent通信</button>
</div>
</template>
<script>
import { EventBus } from '@/event-bus.js'
export default {
methods: {
toChangeSon_1() {
EventBus.$emit('changeBrother','son_2中的data')
},
},
}
</script>
随机组件son_1
<template>
<div class="son_1">
{{}}
</div>
</template>
<script>
import { EventBus } from '@/event-bus.js'
export default {
data(){
son_1Msg：'我是son_1的data',
},
mounted() {
EventBus.$on('changeBrother', (val) => {
this.son_1Msg = val
console.log('son_2组件传递的值', this.son_1Msg) //son_2中的data
})
},
}
</script>
7、兄弟==>兄弟（通过provide/inject）父=>子=>孙（适用于嵌套了3个以上的组件）
父组件Parent
<template>
<div class="Parent">
<Child />
</div>
</template>
<script>
//在父组件的provide参数，嵌套的组件通过inject注入
export default {
provide() {
return {
val: '我是所有Parent组件中的数据',
}
},
}
</script>
子组件Child
<template>
<div class="Child">
<sonChild/>
</div>
</template>
<script>
export default {
inject: ['val'],
mounted(){
console.log("父组件中的val",this.val)
}
}
</script>
孙组件sonChild
<template>
<div class="sonChild">
{{val}}
</div>
</template>
<script>
export default {
inject: ['val'],
mounted(){
console.log("父组件中的val",this.val)
}
}
</script>
8、兄弟==>兄弟（通过vuex状态管理）
<template>
<div class="vuex">
</div>
</template>
<script>
/*
1、可以用mapState、mapGetters在computed进行简写。
2、可以用mapMutations、mapActions在methods进行简写。
3、this.$store.dispatch触发actions上的方法进行调用后端数据。
4、this.$store.commit触发mutations上的方法修改state上的变量。
*/
import { mapState, mapGetters } from 'vuex'
export default {
data() {
return {
msg: '我是小溪流',
}
},
computed: {
//可以通过mapState，mapGetters方法简写代码，直接通过this去访问
//...mapState('music', ['message']),
//...mapState(['largemsg']),
//...mapGetters(['doneTodos']),
// ...mapGetters({doneCount:'doneTodos'}), //可以命名
},
methods: {
// ...mapMutations('music', ['getMusic']),
// ...mapMutations(['tochangelargemsg']),
// ...mapActions(["settimeouting"]),
tochange() {
let newmessage = '我真的变了'
this.$store.dispatch('settimeouting', newmessage)
this.$store.commit('music/getMusic', newmessage)
this.$store.commit('tochangelargemsg', newmessage)
// this.settimeouting(newmessage)
// this.getMusic(newmessage)
// this.tochangelargemsg(newmessage)
},
},
mounted() {
console.log('vuex状态管理工具', this.$store)
//可以直接访问vuex中的state
console.log('this.$store.state', this.$store.state)
//可以直接访问vuex中的getters
console.log('this.$store.state', this.$store.getters)
}
</script>
网友评论