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