vue 组件之间通信的方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 组件之间通信的方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

3.全局事件总线

//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

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

//新建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.路由

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

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

6.浏览器资源传参

有cookie localstrage 之类的总归不过是是get set 文章来源地址https://www.toymoban.com/news/detail-802015.html

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)
}

到了这里，关于vue 组件之间通信的方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！