vue组件间常用的几种通信方式
第一种方式:props这种通信方式适用与父向子传递数据//父组件<template><div class="father"><span>我是父组件</span><br><StudentName :msg="name"></StudentName></div></template><sc
·
第一种方式:props
这种通信方式适用与父向子传递数据
//父组件
<template>
<div class="father">
<span>我是父组件</span><br>
<StudentName :msg="name"></StudentName>
</div>
</template>
<script>
import StudentName from "./components/StudentName.vue"
export default {
components:{
StudentName
},
data(){
return{
name:"李四"
}
}
}
</script>
<style scoped>
.father{
background: green;
height: 50px;
}
</style>
这样我们的子组件就能拿到父组件传递过来的数据,并把它渲染上页面:
// 子组件
<template>
<div class="child">
我是子组件
我是父组件传递过来的数据:{{msg}}
</div>
</template>
<script>
export default {
props:{
msg:String
},
data(){
return {
}
}
}
</script>
<style scoped>
.child{
background: red;
}
</style>
页面显示:
第二种方式:$emit和$on
这种方式适合于任意组件件通信,这里我们演示兄弟之间通信
// 父组件
<template>
<div class="father">
<span>我是父组件</span><br>
<StudentName></StudentName>
<PersonName></PersonName>
</div>
</template>
<script>
import StudentName from "./components/StudentName.vue"
import PersonName from "./components/PersonName.vue"
export default {
components:{
StudentName,
PersonName
},
data(){
return{
name:"李四",
}
}
}
</script>
<style scoped>
.father{
background: green;
height: 100px;
}
</style>
子组件1号
<template>
<div class="child">
我是子组件1号
<!-- 这里写上要发送数据的方法 -->
<button @click="send">给组件2号发送数据</button>
</div>
</template>
<script>
export default {
data(){
return {
name:'你好兄弟,我来找你玩了'
}
},
methods:{
send(){
// 这里在$root身上绑定一个方法,等着兄弟来触发,然后传值给他
this.$root.$emit("name",this.name);
}
}
}
</script>
<style scoped>
.child{
background: red;
}
</style>
子组件2号
<template>
<div class="chi">
我是子组件2号
这是组件1号发过来的数据:{{msg}}
</div>
</template>
<script>
export default {
data(){
return {
msg:""
}
},
mounted(){
// 触发子组件1号绑定的方法,获得子组件1号传的值
this.$root.$on('name',data =>{
this.msg = data
})
}
}
</script>
<style scoped>
.chi{
background: orange;
}
</style>
效果
第三种方法:全局事件总线
这种方法也可以实现任意组件间通信,具体操作如下
首先安装全局事件总线:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus=this //安装全局事件总线,所有组件都能看到$bus
}
}).$mount('#app')
// 父组件
<template>
<div class="father">
<span>我是父组件</span><br>
<StudentName></StudentName>
<PersonName></PersonName>
</div>
</template>
<script>
import StudentName from "./components/StudentName.vue"
import PersonName from "./components/PersonName.vue"
export default {
components:{
StudentName,
PersonName
},
data(){
return{
name:"李四",
}
}
}
</script>
<style scoped>
.father{
background: green;
height: 100px;
}
</style>
// 子组件1号
<template>
<div class="child">
我是子组件1号
<!-- -->
<button @click="send">给组件2号发送数据</button>
</div>
</template>
<script>
export default {
data(){
return {
name:'我是组件1号'
}
},
methods:{
send(){
this.$bus.$emit("name",this.name);
}
}
}
</script>
<style scoped>
.child{
background: red;
}
</style>
// 子组件2号
<template>
<div class="chi">
我是子组件2号
这是组件1号发过来的数据:{{msg}}
</div>
</template>
<script>
export default {
data(){
return {
msg:""
}
},
mounted(){
this.$bus.$on('name',data =>{
this.msg = data
})
}
}
</script>
<style scoped>
.chi{
background: orange;
}
</style>
效果
第四种方法:vuex
什么是vuex?
用官网的话说:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
本质:就是帮助我们管理我们的公共数据,任何组件都可以访问得到这些数据
下面我们来演示一下vuex得用法:
// 安装vuex
npm i vuex
在src目录下建立一个store
然后新建一个index.js,用来写我们vuex里面得代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//准备state——用于存储数据
const state = {
msg:''
}
//准备mutations——用于操作数据(state)
const mutations={
send(state,value){
state.msg = value
}
}
//创建并暴露store
export default new Vuex.Store({
mutations,
state,
})
接下来就是来使用我们得vuex,第一步先在main.js引入我们写好得store文件
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import store from './store'
new Vue({
render: h => h(App),
store,
beforeCreate(){
Vue.prototype.$bus=this //安装全局事件总线,所有组件都能看到$bus
}
}).$mount('#app')
第二步,使用我们的store
// 父组件
<template>
<div class="father">
<span>我是父组件</span><br>
<StudentName></StudentName>
<PersonName></PersonName>
</div>
</template>
<script>
import StudentName from "./components/StudentName.vue"
import PersonName from "./components/PersonName.vue"
export default {
components:{
StudentName,
PersonName
},
data(){
return{
name:"李四",
}
}
}
</script>
<style scoped>
.father{
background: green;
height: 100px;
}
</style>
<template>
<div class="child">
我是子组件1号
<!-- -->
<button @click="send">保存数据进vuex中</button>
</div>
</template>
<script>
export default {
data(){
return {
name:'我是组件1号'
}
},
methods:{
send(){
// 使用commit方法来调用我们store里面的存入数据的方法
this.$store.commit("send",this.name)
}
}
}
</script>
<style scoped>
.child{
background: red;
}
</style>
// 子组件2
<template>
<div class="chi">
我是子组件2号
<!-- 直接可以使用this.$store.state.msg来读取子组件1存入state里面的数据 -->
这是组件1号发过来的数据:{{this.$store.state.msg}}
</div>
</template>
<script>
export default {
data(){
return {
}
},
mounted(){
}
}
</script>
<style scoped>
.chi{
background: orange;
}
</style>
效果
这样子组件2,就能访问到子组件1保存进vuex里面的数据了
总结:这就是我总结的组件件通信的四种常用的方法,可能会有写的不好的地方,我们一起努力!~
更多推荐
已为社区贡献1条内容
所有评论(0)