多组件共享数据实例

最新推荐文章于 2025-06-22 21:51:52 发布

原创

最新推荐文章于 2025-06-22 21:51:52 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文通过实例讲解Vue.js框架下如何实现多个组件之间的数据共享，包括使用Vuex状态管理、事件总线和props传递等方法，帮助开发者更好地理解和应用数据通信。

src/App.vue

<template>
   <div>
      <Count/>
      <Person/>
   </div>
</template>

<script>
import Count from './components/Count'
import Person from './components/Person'

export default {
   
   
   name: 'App',
   components:{
   
   'Count','Person'}
}
</script>

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const actions = {
   
   
   //为奇数时再加
   jiaOdd(context,value) {
   
   
      if(context.state.sum % 2) {
   
   
         context.commit('JIA',value)
      }
   },
   //等一等再加
   jiaWait() {
   
   
      setTimeout(()=>{
   
   
         context.commit('JIA',value)
      },500)
   }
}
const mutations = {
   
   
   JIA(state,value) {
   
   
      state.sum += value