新手小白VUE整理(6) ——组件数据共享,vuex

crazy程序猿丶

已于 2022-11-01 08:58:57 修改

阅读量439

点赞数

分类专栏：新手小白初识vue 文章标签： vue.js javascript 前端

于 2022-10-31 22:24:34 首次发布

本文链接：https://blog.csdn.net/a35336000/article/details/127618925

版权

本文主要介绍了Vue 2.x中组件间的数据共享，包括父组件向子组件、子组件向父组件及兄弟组件之间的数据传递。接着详细讲解了Vuex的原理、好处、基本使用方法，包括State、Mutation、Action、Getter和Module等核心概念，以及如何在项目中配置和使用Vuex来优化前端状态管理。

摘要由CSDN通过智能技术生成

VUE 2.X

1.组件之间的数据共享

1)父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性,示例代码:

// 父组件通过v-bind绑定属性向子组件传值
<Son :msg="message" :user="userInfo"></Son>

data(){
  return {
    message:'hello.',
    userinfo:{name:'zs'}
  }
}
// 子组件
<template>
  <div>
    <p>Son组件</p>
    <p>父组件传递过来的msg值:{
  { msg }}</p>
    <p>父组件传递过来的user信息:{
  { user }}</p>
  </div>
</template>

props:['msg','user']

2)子组件向父组件传值

子组件向父组件共享数据使用自定义事件.示例代码:

// 子组件
export default{
  data(){
    return {count:0}
  },
  methods:{
    add(){
      this.count += 1
      // 修改数据时,通过$emit()方法触发自定义事件
      this.$emit('numchange',this.count)
    }
  }
}

// 父组件
// 监听子组件的numchange事件
<Son @numchange="getNewCount"></Son>
export default{
  data(){
    return {countFromSon:0}
  },
  methods:{
    add(val){
      this.countFromSon = val
    }
  }
}

3)兄弟组件之间数据共享

使用步骤:

①创建eventBus.js模块,并向外共享一个Vue的实例对象
②在数据发送方,调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件
③在数据接收方,调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件
在vue2.x中,兄弟组件之间数据共享方案是eventBus.

// eventBus.js
import Vue from 'v