vue组件通信二

六. 本地存储

原理同vuex相似，利用 window.sessionStorage.setItem(“变量名”, 变量) 存储变量到本地存储，然后通过window.sessionStorage.getItem(“变量名”, 变量) 获取变量

七. Vue全局变量

原理是将属性值挂载到vue的原型上，然后通过 this.属性值 来访问变量

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false
Vue.prototype.msg = "Vue全局变量"

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

父组件

<template>
  <div class="father">
    <h1>父组件</h1>
    <p>这是Vue全局变量获取的值：{{ msg }}</p>
    <Son></Son>
    <Son2></Son2>
  </div>
</template>

子组件

<template>
  <div class="son">
    <h1>子组件</h1>
    <p>这是Vue全局变量获取的值：{{ msg }}</p>
  </div>
</template>

八. 路由传参

主要利用路由之间的跳转来传值
在路由中配置

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

传递变量的组件

<template>
  <div class="home">
    <button @click="toRouter">点击这里进行路由传参</button>
  </div>
</template>

<script>
export default {
  methods: {
    toRouter() {
      this.$router.push({ name: "About", params: { msg: "路由传值" } });
    },
  },
};
</script>

接收变量的组件

<template>
  <div class="about">
    <p>
      这是路由传递过来的值：<b>{{ this.$route.params.msg }}</b>
    </p>
  </div>
</template>

九、localStorage 和 sessionStorage

本地存储其实大家都知道，可能太熟了会忘记了他们也可以实现组件传参。

localStorage 和 sessionStorage 使用方法一样
	// localStorage  和 sessionStorage 这俩使用方法一样
	let obj = {
        	name: "张三",
       		age: 18,
      	};
      // 这里要说的一点是因为本地存储只能存放字符串类型的，所以在存放之前要先转换成字符串
      // 当然如果本来就是字符串类型的可以直接存放
       window.localStorage.setItem("obj", JSON.stringify(obj));

在其他组件中获取：

	// 因为我们存的是引用数据类型，所以获取的时候要把它转换成过来
   let obj =  JSON.parse(window.localStorage.getItem('obj'))

十、vuex

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

在vuex中定义好方法

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
     obj = {}
  },
  mutations: {
    getObj(state,obj){
      state.obj = obj
    }
  },
  actions: {
  },
  modules: {
  }
})

在要传递数据的组件中调用方法

  let obj = {
    name: "张三",
    age: 18,
  };
  // 通过 this.$state.commit()调用，参数一:vuex中的方法名 参数二: 要传入的数据
  this.$state.commit('getObj',obj)

在接受数据的组件中接受数据

// 可以直接使用
<template>
  <div class="son">
	<p>{{this.$store.state.obj.name}}</p>
  </div>
 </template>


// 也可以通过映射的方法映射过来使用
<template>
  <div class="son">
    <p>{{obj.name}}</p>
  </div>
</template>

<script>
// 在这里引入Vuex
import { mapState } from 'vuex'
export default {
  name: "Son",
  props: {},
  // state 和 getter在计算属性里解析，mutations 和 actions 在 methods 方法中解析
  computed: {
    ...mapState(['obj'])
  }
};
</script>