组件传参+Vuex

VUE中的几种组件传参方式

对于vue来说常见的就是兄弟传值，父子传值

1.父传子

在父组件中定义数据，子组件通过props接收父组件传递的数据加以使用

父组件

        <div class="box">
            <p>这是父组件</p>
            <son :list="list"></son>
        </div>

子组件

  props:['list'], //接收到父组件数据

2.子传父

子组件向父组件传递参数

3.兄弟组件传值

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

bus.js

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

<template>
    <div class="nav" :style="{backgroundColor:bg_color,color:text_color}">
        <div class="left" @click="$emit('left-click',$event)">
            <slot name="icon_left"></slot>{{left_text}}
        </div>
        <div class="title">
            <slot name="title"></slot>{{title}}
        </div>
        <div class="right" @click="$emit('right-click',$event)">
            {{right_text}}
            <slot name="icon_right"></slot>
        </div>
        <p :style="{'backgroundColor':myColor}" @click="$parent.outNum++">访问父组件outNum:{{$parent.outNum}}</p>
        <p>来自APP组件:{{myMsg}}</p>
    </div>
</template>
<style lang="scss" scoped>
.nav {
    height: .88rem;
    line-height: .88rem;
    display: flex;
    align-items: center;
    font-size: .2rem;

    .title {
        flex: 1;
        text-align: center;
    }

    .left,
    .right {
        padding: 0 .3rem;
    }
}
</style>
<script>
import bus from '@/utils/bus.js'
export default {
    created() {
        bus.$on("msgchange", $event => {
            console.log("msgchange");
            this.myMsg = $event
        })
    },
    data() {
        return {
            myColor: '#f30',
            myMsg: ""
        }
    },
    props: {
        //文本颜色
        text_color: {
            type: String, default: "#000"
        },
        bg_color: { type: String, default: '#fff' },
        //标题
        title: { type: String, default: '' },
        left_text: { type: String, default: "" },
        right_text: { type: String, default: "" },
    }
}
</script>

4.vuex

   1.什么是vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据

 

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

      1.登录后成功的数据可以全局共享

      2.为了重复利用登录功能可能不止在登陆页面

            1.首页点击弹窗登录

            2.购物车跳转前，弹框登录

            3.登录位置会有很多，如果写在vuex只需要在登陆的地方，$store.dispatch("login",data)方法就可以

3.为什么要写api/login.js（定义api）呢

     1.重复利用登录的api也会调用多次

     2.方便集中管理

     3.所有的请求地址与请求方式api文件中改请求方式与参数可以直接修改api内容即可，不需要具体进入某个组件

import { Login, Reg } from '@/api/user.js'
import $router from "@/router/index.js"
import Notify from '@/plugin/Notify/index.js'
import Vue from 'vue'
Vue.use(Notify)
export default {
    state: {
        userInfo: {
            name: "wang",
            score: 50
        },
        token: ""//token标识
    },
    mutations: {
        SET_USERINFO(state, data) {
            //更新state的userinfo信息
            state.userInfo = data;
            //本地存储信息
            localStorage.setItem("user", JSON.stringify(data))
        },
        SET_TOKEN(state, data) {
            state.token = data;
            //本地存储信息
            localStorage.setItem("token", data)
        },

    },
    actions: {
        //页面退出
        logout(context) {
            context.commit("SET_USERINFO", {})
            context.commit("SET_TOKEN", {})
            // var $route = $router.history.current
            // //获取查询参数
            // var redirect = $route.query.redirect || '/';
            // //实现跳转
            $router.replace('/user')
        },
        //负责登录
        login(context, data) {
            Login(data)
                .then(res => {
                    if (res.data.code === 200) {
                        Notify.success(res.data.msg || "登录成功")
                        alert(res.data.msg)
                        context.commit("SET_USERINFO", res.data.user)
                        context.commit("SET_TOKEN", res.data.token)
                        var $route = $router.history.current
                        //获取查询参数
                        var redirect = $route.query.redirect || '/';
                        //实现跳转
                        $router.replace(redirect)
                    } else {
                        //登录不成功清除用户信息
                        Notify.danger(res.data.msg || "登录失败")
                        // context.commit("SET_USERINFO", {})
                        // context.commit("SET_TOKEN", "")
                        alert(res.data.msg)
                    }
                })
                //失败显示网络失败
                .catch(err => {
                    console.log(err);
                    alert("网络失败")
                })
        },
        reg(context, data) {
            Reg(data)
                .then(res => {
                    if (res.data.code === 0) {
                        alert('注册成功')
                        Notify.success(res.data.msg || "注册成功")
                        $router.push('/login')
                    } else {
                        alert(res.data.msg || "注册失败")
                        Notify.push('/login')
                    }
                })
                .catch((err) => {
                    console.error(err);
                })
        }
    }
}

这是的一个vuex使用，可以看到存储在vuex里的数据，在不同的组件中都可以使用

//登录
<template>
	<div id="">
		<h1>登录</h1>
		<input type="text" v-model="user.name" placeholder="请输入用户名"> <br>
		<input  type="password" v-model="user.password"  placeholder="请输入密码"/> <br>
		<button @click="$store.dispatch('login',user)">登录</button>
		<p>
			<router-link to="/reg">注册</router-link>
		</p>
		<button @click="$notify.show('该做核酸了！','pink')">自定义通知</button>
	</div>
</template>

//注册
<template>
	<div>
		<h1>注册</h1>
		<input type="text" v-model="user.name" placeholder="用户名:"> <br>
		<input type="password" v-model="user.password" placeholder="密码:"> <br>
		<button @click="$store.dispatch('reg',user)">注册</button>
	</div>
</template>