vue 组件的通信方式

前言

在使用Vue开发的时候，组件之间的通信很常用，每次在需要用到的时候，都要去查文档，所以干脆整理一下，免得总是忘记。

父组件向子组件传递数据

1.props：这个是最简单的一种通信了，通过props就可以向子组件传递数据了

/**父组件代码**/
<template>
    <Child :title-txt="showTitleTxt"></Child>
</template>
<script>
    import Child from './child'
    export default {
        name: 'index',
        components: {
            Child
        },
        data () {
            return {
                showTitleTxt: '这是父组件'
            }
        }
    }
</script>

/**子组件代码**/
<template>
    <header>
        {{titleTxt}}
    </header>
</template>
<script>
    export default {
        name: 'header-box',
        props: ['titleTxt']
    }
</script>

2.使用$children可以在父组件中访问子组件。

子组件向父组件传递数据

子组件向父组件传递数据，可以有两种方式
1.props：通过props中的Object类型参数传输数据，可以通过子组件改变父组件的数据内容。这种方式是可行的，但是官方不推荐使用，因为官方定义prop是单向绑定
2.通过$on和$emit

/**父组件代码**/
<template>
    <Child @addFun="add"></Child>
    {{ total }}
</template>

<script>

import Child from './child.vue';

export default {
    components: {
        Child
    },
    data() {
        return {
            total: 0
        }
    }
    methods: {
        add (counter) {
            this.total = this.total + counter
        }
    }
}
</script>

/**子组件代码**/
<template>
    <button @click="handleClick">加</button>
</template>

<script>
export default {
    methods () {
        data() {
            return {
                counter: 10
            }
        }
        handleClick () {
            this.$emit(addFun, this.counter);
        }
    }
}
</script>

非父子组件通信

中央事件总线

简单情况下我们可以通过使用一个空的Vue实例作为中央事件总线

/**bus.js**/
let bus = new Vue()
Vue.prototype.bus = bus

/**header组件**/
<template>
    <header @click="changeTitle">{{title}}</header>
</template>
<script>
export default {
    name: 'header',
    data () {
        return {
            title: '头部'
        }
    },
    methods: {
        changeTitle () {
            this.bus.$emit('toChangeTitle','首页')
        }
    }
}
</script>

/**footer组件**/
<template>
    <footer>{{txt}}</footer>
</template>
<script>
export default {
    name: 'footer',
    mounted () {
        this.bus.$on('toChangeTitle', (title) => {
            console.log(title)
        })
    },
    data () {
        return {
            txt: '尾部'
        }
    }
}

vuex

如果项目结构复杂化以后，这样的自定义事件变多以后代码难以管理，所以还是建议使用vuex。
虽然暂时还没有用上vuex，不见得以后用不上，可以先学习下
如果已经了解过redux或者flux，那么vuex也是类似的，官方的说法就是Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
vuex有四个核心概念，其中state和getters主要是用于数据的存储与输出，而mutations和actions是用于提交事件并修改state中的数据。

参考官方的目录结构：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── dialog_store.js       # 消息提示模块

index.js

/**index.js**/
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);

import dialog_store from '../components/dialog_store.js';//引入某个store对象

export default new vuex.Store({
    modules: {
        dialog: dialog_store
    }
})

/**dialog_store.js**/
export default {
    state:{
        show:false
    }
}

/**在主入口文件中**/
import store from './store'

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

mutations

export default {
    state:{//state
        show:false
    },
    mutations:{
        switch_dialog(state){//这里的state对应着上面这个state
            state.show = state.show ? false : true;
            //你还可以在这里执行其他的操作改变state
        }
    }
}

actions

 export default {
    state:{//state
        show:false
    },
    mutations:{
        switch_dialog(state){//这里的state对应着上面这个state
            state.show = state.show?false:true;
            //你还可以在这里执行其他的操作改变state
        }
    },
    actions:{
        switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法
            context.commit('switch_dialog');
            //你还可以在这里触发其他的mutations方法
        },
    }
}

对于vuex,我也了解的不是很多，在具体组件中的使用，可以参考官网的购物车例子