Vue组件之间的传值方法

1. props(父传子)

<BaseButton text="确认"><BaseButton/>

2. $emit(子传父)

// 父组件
<template>
	<BaseButton text="确认" @submitClick="submitClick"><BaseButton/>
</template>
<script>
export default{
	data(){},
	methods:{
		submitClick(obj){
			// 在这里操作子组件传过来的数据obj
			console.log(obj)
		}
	}
}
</script>

// 子组件
<template>
	<div>
		<button @click="btnClick">{{text}}</button>
	</div>
</template>
<script>
export default{
	props:{
		text:{
			type: String,
			default: '按钮'
		}
	},
	data(){
		info:{
			// xxx
		}
	},
	methods:{
		btnClick(){
			this.$emit('submitClick',this.info)
		}
	}
}
</script>

3. $refs(子传父)

// 父组件
<template>
	<BaseButton ref="sumitBtn" text="确认" @submitClick="submitClick"><BaseButton/>
</template>
<script>
export default{
	methods:{
		getSubcomponentData(){
			console.log(this.$refs.info) // 获取子组件数据
		}
	}
}
</script>

4. $parent(父传子)

this.$parent.方法或者变量即可获取在父组件中定义过的方法和变量

5. $children(子传父)

$children 指代的是子组件，返回的是一个组件集合，也就是一个数组，需要明确索引值才能访问该子组件的数据，不推荐使用

this.$children[索引值]

6. inject & provide(父传子)详情参见此链接

7. sessionStorage、localStorage

两者的存取基本用法一致

sessionStorage

sessionStorage 只能存储字符串。如果你需要存储对象，你可以使用 JSON.stringify 将对象转换为字符串，读取时使用 JSON.parse 将字符串转换回对象。

// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');
// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');
// 删除某个变量
sessionStorage.removeItem('key');
// 清除localStorage中存储的所有数据
sessionStorage.clear();

localStorage

LocalStorage 的数据是和域名绑定的，同一个域名下的页面可以共享 LocalStorage 中的数据。不同域名的页面之间的 LocalStorage 数据是互相独立的。

// 存储数据
 localStorage.setItem('key', 'value');
// 获取数据
var data = localStorage.getItem('key');
 // 删除某个变量
 localStorage.removeItem('key');
// 清除localStorage中存储的所有数据
localStorage.clear();

8. vuex

在Vuex的store.js中定义state和mutations：

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++;
      },
      decrement(state) {
        state.count--;
      }
    }
});

在Vue组件中使用this.$store.commit方法调用mutations来修改状态：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
 
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    }
  }
};
</script>

9. 路由之间传值使用 “?name=lucy”