資訊專欄INFORMATION COLUMN
摘要：另外需要說(shuō)明的是，這里只是凍結(jié)了的值，引用不會(huì)被凍結(jié)，當(dāng)我們需要數(shù)據(jù)的時(shí)候，我們可以重新給賦值。
1 狀態(tài)共享隨著組件的細(xì)化，就會(huì)遇到多組件狀態(tài)共享的情況，Vuex當(dāng)然可以解決這類問題，不過就像Vuex官方文檔所說(shuō)的，如果應(yīng)用不夠大，為避免代碼繁瑣冗余，最好不要使用它，今天我們介紹的是vue.js 2.6新增加的Observable API ，通過使用這個(gè)api我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況。
如下這個(gè)例子，我們將在組件外創(chuàng)建一個(gè)store，然后在App.vue組件里面使用store.js提供的store和mutation方法，同理其它組件也可以這樣使用，從而實(shí)現(xiàn)多個(gè)組件共享數(shù)據(jù)狀態(tài)。
首先創(chuàng)建一個(gè)store.js，包含一個(gè)store和一個(gè)mutations，分別用來(lái)指向數(shù)據(jù)和處理方法。
import Vue from "vue";
export const store = Vue.observable({ count: 0 });
export const mutations = {
setCount(count) {
store.count = count;
}
};
然后在App.vue里面引入這個(gè)store.js，在組件里面使用引入的數(shù)據(jù)和方法
<div id="app">
<img width="25%" src="./assets/logo.png">
<p>count:{{count}}p>
<button @click="setCount(count+1)">+1button>
<button @click="setCount(count-1)">-1button>
div>
template>
4 作用域插槽
利用好作用域插槽可以做一些很有意思的事情，比如定義一個(gè)基礎(chǔ)布局組件A，只負(fù)責(zé)布局，不管數(shù)據(jù)邏輯，然后另外定義一個(gè)組件B負(fù)責(zé)數(shù)據(jù)處理，布局組件A需要數(shù)據(jù)的時(shí)候就去B里面去取。假設(shè)，某一天我們的布局變了，我們只需要去修改組件A就行，而不用去修改組件B，從而就能充分復(fù)用組件B的數(shù)據(jù)處理邏輯，關(guān)于這塊我之前寫過一篇實(shí)際案例，可以點(diǎn)擊這里查看。
這里涉及到的一個(gè)最重要的點(diǎn)就是父組件要去獲取子組件里面的數(shù)據(jù)，之前是利用slot-scope，自vue 2.6.0起，提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。
比如，我們定一個(gè)名為current-user的組件：
{{ user.lastName }}
父組件引用current-user的組件，但想用名替代姓（老外名字第一個(gè)單詞是名，后一個(gè)單詞是姓）：
{{ user.firstName }}
這種方式不會(huì)生效，因?yàn)?b>user對(duì)象是子組件的數(shù)據(jù)，在父組件里面我們獲取不到，這個(gè)時(shí)候我們就可以通過v-slot
來(lái)實(shí)現(xiàn)。
首先在子組件里面，將user作為一個(gè)
<span>
<slot v-bind:user="user">
{{ user.lastName }}
slot>
span>
之后，我們就可以在父組件引用的時(shí)候，給v-slot帶一個(gè)值來(lái)定義我們提供的插槽 prop 的名字：
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
template>
current-user>
這種方式還有縮寫語(yǔ)法，可以查看獨(dú)占默認(rèn)插槽的縮寫語(yǔ)法，最終我們引用的方式如下：
{{ slotProps.user.firstName }}
相比之前slot-scope代碼更清晰，更好理解。
5 屬性事件傳遞
寫過高階組件的童鞋可能都會(huì)碰到過將加工過的屬性向下傳遞的情況，如果碰到屬性較多時(shí)，需要一個(gè)個(gè)去傳遞，非常不友好并且費(fèi)時(shí)，有沒有一次性傳遞的呢（比如react里面的{...this.props}）？答案就是v-bind和v-on。
舉個(gè)例子，假如有一個(gè)基礎(chǔ)組件BaseList，只有基礎(chǔ)的列表展示功能，現(xiàn)在我們想在這基礎(chǔ)上增加排序功能，這個(gè)時(shí)候我們就可以創(chuàng)建一個(gè)高階組件SortList。
<template>
<BaseList v-bind="$props" v-on="$listeners"> BaseList>
template>