Vue组件间通信方式
一.props
props是父子组件间的一种通信方式
当父组件给子组件传递数据(非函数)时,本质上是父组件给子组件传递数据
当父组件给子组件传递数据(函数)时,本质上是子组件给父组件传递数据
注意:props值不能修改
1. 父组件给子组件传递数据
父组件传递的数据分为静态和动态
静态:
<template>
<div class="container">
<h4>小卖部</h4>
<hr />
<MySon name="瓜子" money="3"></MySon>
</div>
</template>
动态:使用v-bind绑定
<MySon :name="good.name" :money="good.money"></MySon>
<script>
export default {
name: "MyFather",
data(){
return{
good:{
name:'瓜子',
money:3
}
}
};
</script>
子组件接收数据时有三种写法
第一种:仅接收
<template>
<div class="contain">
<p>商品名称:{{ name }}</p>
<p>价格:{{ money }}</p>
</div>
</template>
<script>
export default {
name: "MySon",
props: ["name", "money"],
};
</script>
第二种:限制类型
props:{
name:String,
money:Number
}
第三种:限制类型、必要性、默认值
props:{
name:{
type:String, //类型
required:true //必要性
},
money:{
type:Number,
default:10 //设置默认值
}
}
2. 子组件给父组件传递数据
父组件中给子组件传递一个函数
<template>
<div class="container">
<h4>小卖部</h4>
<hr />
<MySon :getName="getName"></MySon>
</div>
</template>
<script>
import MySon from "@/components/Son.vue";
export default {
name: "MyFather",
components: { MySon },
methods: {
getName(name) {
console.log(name);
},
},
};
</script>
子组件中将需要传递的数据以参数的形式传递给父组件
<template>
<div class="contain">
<button @click="send">点我发送商品信息</button>
</div>
</template>
<script>
export default {
name: "MySon",
props: ["getName"],
data() {
return {
good: {
name: "汽水",
money: 5,
},
};
},
methods: {
send() {
this.getName(this.good.name);
},
},
};
</script>
二、自定义事件
自定义事件适用于 子组件给父组件传递数据
父组件中,给子组件绑定自定义事件
子组件中,在合适的时候使用 $emit 触发自定义事件并传递数据
父组件给子组件绑定自定义事件
1.使用 v-on 给子组件绑定自定义事件
<template>
<div class="container">
<h4>小卖部</h4>
<hr />
<MySon @getName="getName"></MySon>
</div>
</template>
2.使用 $on 绑定
第一个参数是自定义事件名,第二个参数是回调
<template>
<div class="container">
<h4>小卖部</h4>
<hr />
<MySon ref="son"></MySon>
</div>
</template>
<script>
import MySon from "@/components/Son.vue";
export default {
name: "MyFather",
components: { MySon },
methods: {
getName(name) {
console.log(name);
},
},
mounted() {
this.$refs.son.$on("getName", this.getName);
},
};
</script>
子组件中触发自定义事件并传递数据
第一个参数是自定义事件名,第二个参数是需要传递的数据
<template>
<div class="contain">
<button @click="send">点我发送商品信息</button>
</div>
</template>
<script>
export default {
name: "MySon",
data() {
return {
good: {
name: "汽水",
money: 5,
},
};
},
methods: {
send() {
this.$emit("getName", this.good.name);
},
},
};
</script>
注意:
使用 $on 绑定自定义事件时,回调只能配置在methods中或使用箭头函数,否则this指向会出问题
在组件标签上绑定原生事件时,需要加上native修饰符
三、全局事件总线
全局事件总线适用于任意组件之间的通信
在入口文件main.js中安装全局事件总线
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
},
}).$mount('#app')
在需要传递数据的组件中使用 $emit 触发事件并传递数据
第一个参数是事件名称,第二个参数是需要传递的数据
<template>
<div class="contain">
<button @click="send">点我发送商品信息</button>
</div>
</template>
<script>
export default {
name: "MySon",
data() {
return {
good: {
name: "汽水",
money: 5,
},
};
},
methods: {
send() {
this.$bus.$emit("getName", this.good.name);
},
},
};
</script>
在需要接收数据的组件中使用 $on 接收数据
第一个参数是事件名称,第二个参数是回调
export default {
name: "MyFather",
components: { MySon },
methods: {
getName(name) {
console.log(name);
},
},
mounted() {
this.$bus.$on("getName", this.getName);
},
};
</script>
四、pubsub消息发布与订阅
pubsub也适用于任意组件间的通信
安装:npm install pubsub-js
引入:import pubsub from “pubsub-js”;
使用:
在发布消息的组件中,使用pubsub.publish进行数据传递
第一个参数是事件名称,第二个参数是需要传递的数据
<template>
<div class="contain">
<button @click="send">点我发送商品信息</button>
</div>
</template>
<script>
import pubsub from "pubsub-js";
export default {
name: "MySon",
data() {
return {
good: {
name: "汽水",
money: 5,
},
};
},
methods: {
send() {
pubsub.publish("getName", this.good.name);
},
},
};
</script>
在接收消息的组件中,使用pubsub.subscribe接收消息
第一个参数是事件名称,第二个参数是回调。回调中有两个参数,第一个是被触发的事件名称,第二个是数据
<script>
import MySon from "@/components/Son.vue";
import pubsub from "pubsub-js";
export default {
name: "MyFather",
components: { MySon },
methods: {
getName(msgName, name) {
console.log(name);
},
},
mounted() {
pubsub.subscribe("getName", this.getName);
},
};
</script>
五、vuex
vuex是Vue中实现集中式状态(数据)管理的一个Vue插件,适用于任意组件间的通信
安装:npm install vuex
基本配置:创建src/store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
name:'汽水'
}; //用于存储数据
const actions = {}; //用于响应用户的操作
const mutations = {}; //修改state中的数据
const getters = {}; //处理加工state中的数据
export default new Vuex.Store({
state,
actions,
mutations,
getters,
});
任意组件都可以从state中获取到数据
在组件中使用$store.state.name
可以获取name数据
也可以使用mapState
方法将state中的数据映射为计算属性
computed: {
//对象写法
...mapState({name:'name'}),
//数组写法
...mapState(['name']),
},