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>