Vue组件间通信方式

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']),
},