组件通信

vue本身的组件通信

• 父==>子：父组件向子组件传参或者调用子组件的方法
• 子==>父：子组件向父组件传参或者调用父组件的方法
• 兄弟之间：兄弟组件之间传参或者调用方法

父子通信

• 传参 - props

思路：定义子组件的属性（自定义），父组件赋值给子组件

• 调用方法（1） - $refs

思路：定义子组件的属性-ref="a",父组件通过：

this.$refs.a.子组件方法();

• 调用方法（2） - children

思路：父组件通过：

this.$children[0].子组件方法();

子父通信

• 调用方法（1） - $parent.$emit("父组件自定义事件");

思路：父组件在组件的生命周期（mounted）用$on定义事件，子组件用

this.$parent.$emit("父组件自定义事件");

• 调用方法（2） - $emit("父组件自定义事件");

思路：父组件在调用子组件时用v-on把事件传给子组件，子组件用

this.$emit("父组件自定义事件")调用父组件传过来的事件

    
    
     
父组件-{
   {this.text}}
    
         
     
    

• 调用方法（3） - parent

思路：父组件在调用子组件时用v-on把事件传给子组件，子组件用

this.$parent.父组件事件

    
    
     
父组件-{
   {this.text}}
    
     
    

兄弟之间的通信

和上面介绍的父子之间通信是一样的，因为任何连个子组件之间都会拥有一个共同的父级组件，所以兄弟组件之间的通信就是子1向父，然后父向子2，这样来达到兄弟之间组件的通信

Vuex - 状态管理通信

跨组件通信的一种实现方式

• 用到就封装一个组件.js
• 组件.js

// 设置属性：stateconst state = {    count = 0;}// 设置方法：mutaionsconst mutaions = {    increment(_state){        _state.count += 1;    }}// 执行方法const actions = {    increment(_content){        _content.commit('increment');    }}// 暴露export default{    state,    mutaions,    actions}

• 集合实例化 store.js

import Vue from 'Vue';import Vuex from 'vuex';// 引入组件.jsimport transition from './transion.js';// 实例化对象const store = new Vue.Store({    modules:{        transition    }});// 暴露对象export default store;

• 主入口app.js实例化vuex对象

// 引入vuex对象import store from './vuex/store.js';// 实例化vuex对象new Vue({    el:"#app",    router,    store,    render:h=>h(app)});

• 各组件之间调用

1.调用参数

$store.state.组建名.属性

2.调用方法

$store.dispatch('事件名');