vue 组件之间通信的方式

1.父向子版父组件设置自定义属性子组件props接收

javascript 复制代码

//父组件环境下
<my-demo :自定义属性名字="要传递的具体值"></my-demo>
//子组件
export default{
props:[自定义属性名字]
}

2.子向父版父组件设置自定义方法并绑定接收的方法子组件触发方法

javascript 复制代码

//父组件环境下
<my-demo @自定义方法="绑定的方法"></my-demo>
export default{
    methods:{
        绑定的方法(v1){
            console.log(v1)//abb1
        }
    }
}
//子组件
export default{
  methods:{
    xxx(){
        this.$emit('自定义方法','abb1')
        //可以传多个参数
    }
  }
}

3.全局事件总线

javascript 复制代码

//1.创建bus.js 文件 
// bus.js文件内容
import Vue from 'vue'
// export default new Vue()
const Bus = new Vue()
export default Bus

//2.在main.js中使用
import Bus from './utils/bus' // 这是我的路径，正确引用你们的路径

//3.在需要的地方触发事件
this.$bus.$emit('allclear',type)

//4. 接收事件的地方接收并下一步处理
 mounted() {
    this.$bus.$on('allclear', (type) => {
      // console.log(type)
      if (type === this.fathercomname) {
        if (this.value) {
          this.value = undefined
        }
      }
    })
}

4.Vuex

用这个的话首先要装包或者创建工程的时候选择这个选项手脚架会给你装好

javascript 复制代码

//新建store 文件
//文件内容
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
Vue.use(Vuex)

//模块化
const store = new Vuex.Store({
  modules: {
    app,
  },
  getters
})

export default store


//模块化文件内容 具体的看自己的功能哈
import Cookies from 'js-cookie'

//这个模块是用来检测屏幕视窗的
const state = {
  sidebar: {
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false
  },
  device: 'desktop'
}

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  }
}

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}


//getter的内容
const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
}
export default getters



//在main.js导入
import store from './store'


//在对应组件中使用
import { mapGetters } from "vuex";
 computed: {
        ...mapGetters(['device']),
    },

5.路由

抽象一点说路由也算通信方式的一种吧这种跨组件跨页面路由传参

javascript 复制代码

//例子 
this.$router.push({
        name: "GanttChart",
        params: {
          id: id,
          business_file: business_file,
        },
      });

6.浏览器资源传参

有cookie localstrage 之类的总归不过是是get set

javascript 复制代码

import Cookies from 'js-cookie'

//名字
const TokenKey = 'xxxxx'

//向外导出一个获取的方法
export function getToken() {
  return Cookies.get(TokenKey)
}

//向外导出一个设置的方法
export function setToken(token) {
  //过期时间跟着后台设置的时间 后台给的是一个时间戳 算了一下是当前时间30日后过期 
  return Cookies.set(TokenKey, token,{expires:30})
}

//向外导出一个移除的方法
export function removeToken() {
  return Cookies.remove(TokenKey)
}