[Vue] vue 组件传值

vue 组件之间数据传输(props 传值方式)

这个多用于父子组件之间的传值,是最基本的传值方式

父亲组件进行绑定,将数据绑定,其中 personal,personalData,imgUrl 是绑定的数据,@updata 是绑定的事件

<template> ... <slideBar @updata="updata" :personal="personal" :personalData="personalData" :imgUrl="imgUrl" ></slideBar> ... <template>

子组件进行获取数据通过 props 进行获取,可以设置一些静态类型检查,类似于 react 的 proptypes,同时子组件想要向父组件进行传值,可以通过 emit 进行传值就行了

export default { props: { slideMsg: Array, personal: Object, personalData: Object, imgUrl: String }, ... methods:{ submitEvent(){ ... this.emit("updata","我是获取的数据"); ... } } } vue 组件之间数据传输(eventBus 进行组件传递)

事件 bus 通过一个新的 vue 实例,来进行事件监听和事件分发
commom/bus.js

//极简单的vue实例 import Vue from 'vue'; // 使用 Event Bus const bus = new Vue(); export default bus;

在 game 组件中引入

import bus from "@/common/bus"; ... bus.$emit("moneyChange", {....}); ...

在用 money 组件中引入

import bus from "@/common/bus"; ... bus.$on("moneyChange", msg => { msg && this.initHomeData(); }); ...

在最初的项目阶段这是一个不错的选择,但是随着项目体积的增大,事件触发和数据流向变得越来越不可见,后续开发和维护变得越来越困难.

vue 组件之间数据传输(vuex) 初始化 store

src/main.js

import Vuex from "vuex"; Vue.use(Vuex); new Vue({ ..., store, ..., });

src/store/index.js

import mutations from "./mutations"; const initStore = { state: { userBasicInfo: {}, siteBaseInfo: { download: "", invitation: "", register_enable: "", service_qq1: "", service_qq2: "", service_wechat: "", }, }, mutations }; export default initStore;

src/store/mutations.js

const SET_USER_BASIC_INFO = 'SET_USER_BASIC_INFO'; const SET_SITE_BASE_INFO = 'SET_SITE_BASE_INFO'; export default { [SET_USER_BASIC_INFO](state, payload) { state.userBasicInfo = payload.data; }, [SET_SITE_BASE_INFO](state, payload) { state.siteBaseInfo = Object.assign({}, state.siteBaseInfo, payload); }, } state 正常使用 state

Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态。每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中。

const app = new Vue({ el: '#app', // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 store, components: { Counter }, template: ` <div> <counter></counter> </div> ` })

在子组件中使用

const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } } } mapState 辅助函数

按官网的案例

import { mapState } from 'vuex' export default { // ... computed: mapState({ // 箭头函数 siteBaseInfo: state => state.siteBaseInfo, // 传字符串参数 siteBaseInfo: "siteBaseInfo", // 为了能够使用 `this` 获取局部状态，必须使用常规函数 download_ios (state) { return state.siteBaseInfo.download + this.prefix }, download: state => state.siteBaseInfo.download }) }

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组

computed: mapState([ // 映射 this.count 为 store.state.count 'count' ]) mapState 与局部计算属性混合使用

使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。

computed: { localComputed () { /* ... */ }, // 使用对象展开运算符将此对象混入到外部对象中 ...mapState({ // ... }) } getter 的使用

有时候我们需要从通过 state 得到一些新的状态,因为这一状态可能其他很多组件都要使用这一状态.比如余额这一参数,我们当前只有盈利和亏损额,但是很多页面都要使用余额进行显示,那么每个引入页面都要进行一次计算吗?想想就麻烦,还是只计算一次,然后直接获取这个余额值来的方便

store/getters.js

export default { balance: (state) => { return Number(state.userBasicInfo.profit) - Number(state.userBasicInfo.loss); }, download: (state) => { return state.siteBaseInfo.download; } } mapGetters 辅助函数

辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'balance', 'download', // ... ]) } } getter 的使用 //直接使用 store.getters.download //组件中使用 computed: { download () { return this.$store.getters.download } } //使用辅助函数 ...mapGetters([ 'download', 'balance', ]) //和mapState一起用 computed: { ...mapState({ siteBaseInfo: "siteBaseInfo", }), ...mapGetters({ download: 'download' }) }, Getter 也可以接受其他 getter 作为第二个参数 getters: { // ... doneTodosCount: (state, getters) => { return getters.doneTodos.length } }

总之,getter 就是一个将一些需要进行再次计算的 state 计算好,然后将其作为 state 进行快捷的引用

mutation 使用

最好提前在你的 store 中初始化好所有所需属性

当需要在对象上添加新属性时，你应该使用 Vue.set(obj, 'newProp', 123)或以新对象替换老对象(对象展开符)

mutation 必须是同步函数