多组件共享数据实例

最新推荐文章于 2024-06-23 14:01:55 发布

阿夏呀

最新推荐文章于 2024-06-23 14:01:55 发布

阅读量197

点赞数

分类专栏： store vuex vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/summer_cloudy/article/details/127899307

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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