VUE数据共享

陳er_

已于 2022-09-25 20:36:14 修改

阅读量481

点赞数 1

文章标签： javascript 前端开发语言

于 2022-09-25 01:45:16 首次发布

本文链接：https://blog.csdn.net/m0_68885781/article/details/127033341

版权

父与子之间数据共享

父 => 子属性绑定

父组件向子组件传值:v-bind属性绑定，子组件props接收

<template>
  <div id="app">
  <school></school>
    <!--App props 配置方式    -->
    <student id="002" name="小寻" age="18" sex="男"></student>
    <student id="003" name="老王" sex="女"></student>
  </div>
</template>

<template>
  <div id="student">
    <h2 >学生ID:{{ id }}</h2>
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <h2>学生年龄:{{ age }}</h2>
    <button @click="showName">显示名称</button>
  </div>
</template>

<script>
import {mixin} from '../assets/js/mixin'

export default {
  name: "student",
  data(){
    return{}
  },mixins:[mixin],
  // 声明  接收app传递过来的数据
  props:['id'+'name'+'sex'+'age']
}
</script>

<style scoped>

</style>

子 => 父事件绑定

子组件向父组件传值：v-on事件绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <com1 @func123="show">

        </com1>

    </div>

    <template id="mytemplate">

        <div>

            <h1>这是子组件的button</h1>

            <input type="button" value="click" @click="myclick">

        </div>

    </template>

    <script>

        var com1={

            template:'#mytemplate',

            data (){

                return{msg:'test'}

            },

            methods:{

                myclick(){

                    this.$emit('func123',123,'wetest')

                }

            }

        };

        var vm = new Vue({

            el:'#app',

            data:{

                name:'mj',age:28

            },

            methods:{

                show(data1,data2){

                    console.log("这是父组件的方法,参数："+data1+data2);

                }

            },

            components:{

                com1

            }

        }) 

    </script>

</body>

</html>

父 <=> 子组件上的v-model

<template>
  <div>
      <h1>user-edit</h1>
      <input type="text" v-model="message">
      <h2>{{message}}</h2>
  </div>
</template>
 
<script>
export default {
    name:'UserEdit',
    props:{
        message:{
            type:String
        }
    },
    data(){
        return{
            message:''
        }
    }
}
</script>
 
<style>
 
</style>

兄弟之间数据共享

EventBus

EventBus 称为事件总线

兄弟组件之间共享数据 EventBus :$on接收数据，$emit发送数据

关于 EventBus 在开发中经常会选择使用它来进行模块间通信、解耦。平常使用这个库只是很浅显的操作三部曲，register，post，unregister。来达到开发目的。始终有种不明确，模糊的操作感。因此准备对EventBus进行一个深入，全面的理解，消除模糊，片面感，让以后在使用这个库的时候，有更好的掌握和使用。并记录下来，方便以后查阅。关于EventBus会分两章进行记录，本篇文章，是对EventBus的使用做一个全面的介绍，另一篇文章则会对EventBus库的源码进行分析，看看他的实现原理是什么样的。

<template>
  <div>
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
  name: "School",
  data() {
    return {
      name: '法云寺',
      address: '山中山',
      pubId:''
    }
  }, methods: {
    myShowInfo(msg,data) {
      console.log("这是School组件,收到了数据:"+msg+data);
    }
  },
  mounted() { //钩子
    // this.$bus.$on('showInfo',this.myShowInfo)
    // console.log(this.$bus)

    // 订阅消息
    this.pubId=pubsub.subscribe('myShowInfo',this.myShowInfo);
  },beforeDestroy() {
      // this.$bus.$off('showInfo');
    pubsub.unsubscribe(this.pubId);
  }
}
</script>

<template>
  <div>
    <h2>学生姓名:{{ name }} </h2>
    <h2>学生性别:{{ sex }} </h2>
    <button @click="sendStudentName">点我传递学生信息</button>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "Student",
  data() {
    return {
      name: '张三',
      sex: '男'
    }
  },methods:{
    sendStudentName(){
      //  $emit 触发事件   >>> $emit(eventName)
      // this.$emit('showInfo',this.name);

      //提供数据
      pubsub.publish('myShowInfo',this.name);
    }

  }
}
</script>

<style scoped>

</style>

也有用缓存来传值的，比如sessionStorage.localStorage等

后代之间数据共享

provide和inject

现在我存在两个父子组件，相互之间嵌套了很多层，想要父组件中的方法。之前是通过$parent去实现的，现在我准备使用provide和inject实现

在父组件中provide
因为我是想要调用父组件中的showTopic方法，所以在provide中返回这个方法即可
代码如下：

provide() { return { showTopic: this.showTopic, } },

在子组件中inject
在定义data的上方，插入代码inject

inject:["showTopic"],

尝试调用

async testCase(){
console.log('修改的Id ', this.topicId)

const dataTest = await api.test.test({

    accountId: window. localStorage.getItem( ' accountId '),topicId: this.topicId,
    topicId：this.topicId，
    topicTypeId: this.selectTopic.topicTypeId,})

if (dataTest.code === 200){
    this.showTopic(this.topicId)
}},

但是一旦页面上有多个组件控制某个属性变化时，其余组件都要跟着变化时，这个时候用上述方式就过于繁琐，这个时候用vuex数据共享解决，就不用反复传值。

全局数据共享

vuex

vuex数据共享的优势：

1.能够在vuex中集中管理共享的数据，便于后续维护和开发（所有共享的数据都可以放在一块）

2.能够高效地统筹组件之间的数据共享，提高开发效率

3存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

当然vuex也有其劣势，在一个页面重新渲染或者刷新页面时，vuex里面更新的数据会回复初始值

vuex的简单使用

安装

创建 store 的index.js文件

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

Vue.use(Vuex);

//准备三个对象
const actions = {
    addOdd(context, value) {
        console.log('进入了actions的addOdd，value：' + value);
        context.commit('ADDODD', value);
    },
    addWait(context, value) {
        console.log('进入了actions的addWait，value：' + value);
        context.commit('ADDWAIT', value);
    }
}
const mutations = {
    JIA(state, value) {
        console.log('进入了mutations的 JIA，value：' + value);
        state.sum += value;
    },
    JIAN(state, value) {
        console.log('进入了mutations的 JIAN，value：' + value);
        state.sum -= value;
    },
    ADDODD(state, value) {
        console.log('进入了mutations的 ADDODD，value：' + value);
        if (state.sum % 2) {
            state.sum += value;
        }
    },
    ADDWAIT(state, value) {
        console.log('进入了mutations的 ADDWAIT，value：' + value);
        window.setTimeout(() => {
            state.sum += value;
        }, 1000);
    }
}
// 准备 state 对象  用于保存具体的数据 (初始化数据存放：变量)
const state = {sum: 0,
    schoolName:'家里蹲'
}

// 准备getters 用于将state中的数据进行再次加工
const getters = {
    bigSum() {
        return state.sum * 10;
    }
}

// 创建并公开
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
});

<template>
  <div>
    <h2>当前求和结果为:{{ sum }}</h2>
    <h2>当前的求和内容放大10倍：{{ bigSum }}</h2>
    <h2>{{ schoolName }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">
      +
    </button>

    <button @click="decrement(n)">
      -
    </button>
    <button @click="incrementOdd(n)">
      求和为奇数在加
    </button>
    <button @click="incrementWait(n)">
      延迟在加
    </button>
  </div>

</template>

<script>
//map
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
  name: "Count",
  data(){
    return{
      n:1
    }
  },methods:{
    ...mapMutations({
      increment:'JIA',
      decrement:'JIAN',
      incrementOdd:'ADDODD',
      incrementWait:'ADDWAIT'
    })
  },computed:{
      ...mapState(['sum','schoolName']),
      ...mapGetters(['bigSum'])
  }
}
</script>

<style scoped>

</style>

陳er_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE数据共享

因此准备对EventBus进行一个深入，全面的理解，消除模糊，片面感，让以后在使用这个库的时候，有更好的掌握和使用。关于EventBus会分两章进行记录，本篇文章，是对EventBus的使用做一个全面的介绍，另一篇文章则会对EventBus库的源码进行分析，看看他的实现原理是什么样的。但是一旦页面上有多个组件控制某个属性变化时，其余组件都要跟着变化时，这个时候用上述方式就过于繁琐，这个时候用vuex数据共享解决，就不用反复传值。3存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。
复制链接

扫一扫