Vue组件的九种通信方式

目录

1.父传子props

2.子传父$emit

3.兄弟组件传值eventBus

4.父组件使用子组件的数据和方法$refs

5.子组件使用父组件的数和方法$parent

6.祖先传值provide/inject

7.爷孙传值 $attrs/$listeners

8.路由传值

9.Vuex传值

---

1.父传子props

同过props里面的值在子组件上与父组件的数据进行绑定就能获取到父组件的数据

2.子传父$emit

通过$emit第二个参数对父组件进行传值

 
    父组件:{{list}}
    
    
  
  

3.兄弟组件传值eventBus

new 一个Vue对象来作为中间对象

4.父组件使用子组件的数据和方法$refs

在子组件上定义ref=""在通过$refs.ref去获取对应的dom

    父组件
    
  
  

5.子组件使用父组件的数和方法$parent

6.祖先传值provide/inject

    爷爷
    
  

  

7.爷孙传值 $attrs/$listeners

    爷爷
    
    
    
  

  

8.路由传值

    goDetail
    
  
  

9.Vuex传值

定义store

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    school: "北京大学",
    a:"nice"
  },
  getters: {
    returnVal(state) {
      return state.school + state.a;
    },
  },
  mutations: {
    changeSchool(state, val) {
      state.school = val;
      console.log('修改成功');
    },
  },
  actions: {},
  modules: {}
});

挂载

import Vue from 'vue';
import App from './App.vue';
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import publicFn from "./publicFn/publicFn";

Vue.config.productionTip = false


const url = process.env.VUE_APP_URL;
Vue.prototype.$url = url;
Vue.prototype.$publicFn = publicFn;

Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

使用