Vue组件的传参问题、Vuex的介绍

·歪腻·

已于 2022-10-20 18:55:39 修改

阅读量2.4k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-10-20 18:45:24 首次发布

本文链接：https://blog.csdn.net/wzy199982/article/details/127432288

版权

Vue组件的传参问题

关于vue组件的传参分为父传子（props）和子传父（$emit）

这里为大家简单介绍以下如何实现传参
第一种：父传子（props）

props: {
    //父组件传入的item数据
    item: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

第二种：子传父（$emit）

<div class="right" @click="$emit('right-click', $event)">

$emit的第一个参数即自定义的事件名，第二个参数是事件名对应的参数

有了传参，自然也少不了引用父组件和子组件

1、我们通过使用$parent方法来引用父组件

<a href="" @click.prevent="$store.dispatch('logout')">退出</a>

例如：在父组件中定义好了退出登录的方法，就需要在子组件中引用父组件来调用这个方法（如上所示）
2、同理，引用子组件也是一样（$ children、$ refs）
注意一点：使用$refs的前提是使用了ref=""去定义过

如何实现跨层级访问数据呢（非父子关系）

上边讲的传参都是在同级情况下进行，想要跨层级实现访问数据，就需要通过创建bus来进行
第一步、创建bus.js文件

//导入Vue
import Vue from "vue"
//创建Vue实例
var bus = new Vue();
//导出bus
export default bus

第二步、在要发送数据的组件中导入bus

import bus from "@/utils/bus.js";

第三步、在有接受数据的组件中导入bus并使用bus.$on（注意this）

created() {
    console.log(this.$children);
    bus.$on("msgchange", ($event) => {
      this.msg = $event;
    });
  },

这里需要注意：任意组件只要导入bus就可以随意的发送与监听数据

bus常用的三个方法

bus.$on（eventname,callback）监听事件
bus.$emit（eventname,data）发送事件
bus.$off（eventname）移除事件

还有一种特殊的依赖注入provider和inject（跨层级访问，只读）

provider提供数据，所有子组件都可以通过inject接受数据
inject接受父辈提供的数据

Vuex

什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

什么时候我们才使用Vuex呢

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

使用Vuex的好处

Vuex实现数据全局共享，响应式更新

对于Vuex的解释可以分解为以下几个方面

1、state存放状态
使用的时候通过$store.state.xxx访问

state: {
    //定义user状态（数据）
    user: {
      name: "wzy",
      score: 280
    }
  },

2、mutations改变状态的唯一方法
使用的时候通过$store.commit（“xxx”，data）访问

mutations: {
    //改变数据的唯一方式只能在mutations里面
    //建议方法名大写，默认第一个参数是state
    SET_SCORE(state, data) {
      state.user.score = data;
    }
  },

3、actions异步操作数据的方法
使用的时候通过$store.dispatch（“xxx”，data）访问

actions: {
    //所有针对state异步操作网络请求等放在actions
    changeScore(context, data) {
      setTimeout(() => {
        context.commit("SET_SCORE", data)
      }, 5000)
    }
  },

4、getter从现有的数据计算出新的数据
使用的时候通过$store.getters.xxx访问

getters: {
    //从现有的数据计算出新的数据
    level(state) {
      return (state.user.score / 100).toFixed(1);
    }
  },

5、module子模块
把功能放在store/modules/user.js中

modules: {
    user
  }

为什么要把登录转换到vuex中

登录后成功的数据可以全局共享
为了重复利用，登录功能不可能值在登录页面，如：
首页点击登录弹框按钮
购物车，跳转前，弹框登录，登录位置会有很多
如果写在vuex中，只需要在登录的地方调用$stroe.dispatch(“login”,data)就可以

为什么要写api/login.js实现登录

重复利用，登录的api也会调用很多次
方便集中管理所有的请求地址与请求方式api文件中
改请求方式与参数可以直接修改api内容就可以，不用具体进入到某个组件