1 状态共享
随着组件的细化,就会遇到多组件状态共享的情况,Vuex当然可以解决这类问题,不过就像Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是vue.js 2.6新增加的Observable API ,通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。更多资料请关注爱创课堂。
如下这个例子,我们将在组件外创建一个store,然后在App.vue组件里面使用store.js提供的store和mutation方法,同理其它组件也可以这样使用,从而实现多个组件共享数据状态。
首先创建一个store.js,包含一个store和一个mutations,分别用来指向数据和处理方法。
import Vue from “vue”;
export const store = Vue.observable({ count: 0 });
export const mutations = {
setCount(count) {
store.count = count;
}
};
复制代码
然后在App.vue里面引入这个store.js,在组件里面使用引入的数据和方法
count:{{count}}
<button @click=“setCount(count+1)”>+1
<button @click=“setCount(count-1)”>-1
复制代码
可以看到传递属性和事件的方便性,而不用一个个去传递
6 函数式组件
函数式组件,即无状态,无法实例化,内部没有任何生命周期处理方法,非常轻量,因而渲染性能高,特别适合用来只依赖外部数据传递而变化的组件。
写法如下:
在template标签里面标明functional
只接受props值
不需要script标签
<List
:items="[‘Wonderwoman’, ‘Ironman’]"
:item-click=“item => (clicked = item)”
/>
Clicked hero: {{ clicked }}
复制代码
{{ item }}
复制代码
7 监听组件的生命周期
比如有父组件Parent和子组件Child,如果父组件监听到子组件挂载mounted就做一些逻辑处理,常规的写法可能如下:
// Parent.vue
<Child @mounted=“doSomething”/>
// Child.vue
mounted() {
this.$emit(“mounted”);
}
复制代码
这里提供一种特别简单的方式,子组件不需要任何处理,只需要在父组件引用的时候通过@hook来监听即可,代码重写如下:
<Child @hook:mounted=“doSomething”/>
复制代码
当然这里不仅仅是可以监听mounted,其它的生命周期事件,例如:created,updated等都可以,是不是特别方便~