1.父向子版? 父組件設置自定義屬性 子組件props接收

//父組件環(huán)境下
<my-demo :自定義屬性名字="要傳遞的具體值"></my-demo>
//子組件
export default{
props:[自定義屬性名字]
}

2.子向父版 父組件設置自定義方法并綁定接收的方法 子組件觸發(fā)方法

//父組件環(huán)境下
<my-demo @自定義方法="綁定的方法"></my-demo>
export default{
    methods:{
        綁定的方法(v1){
            console.log(v1)//abb1
        }
    }
}
//子組件
export default{
  methods:{
    xxx(){
        this.$emit('自定義方法','abb1')
        //可以傳多個參數(shù)
    }
  }
}

?3.全局事件總線??

//1.創(chuàng)建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.在需要的地方觸發(fā)事件
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

用這個的話首先要裝包或者創(chuàng)建工程的時候選擇這個選項手腳架會給你裝好

//新建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?文章來源地址http://www.zghlxwxcb.cn/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模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！