摘要：另外需要说明的是，这里只是冻结了的值，引用不会被冻结，当我们需要数据的时候，我们可以重新给赋值。
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，在组件里面使用引入的数据和方法
<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，只负责布局，不管数据逻辑，然后另外定义一个组件B负责数据处理，布局组件A需要数据的时候就去B里面去取。假设，某一天我们的布局变了，我们只需要去修改组件A就行，而不用去修改组件B，从而就能充分复用组件B的数据处理逻辑，关于这块我之前写过一篇实际案例，可以点击这里查看。
这里涉及到的一个最重要的点就是父组件要去获取子组件里面的数据，之前是利用slot-scope，自vue 2.6.0起，提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。
比如，我们定一个名为current-user的组件：
{{ user.lastName }}
父组件引用current-user的组件，但想用名替代姓（老外名字第一个单词是名，后一个单词是姓）：
{{ user.firstName }}
这种方式不会生效，因为user对象是子组件的数据，在父组件里面我们获取不到，这个时候我们就可以通过v-slot
来实现。
首先在子组件里面，将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，只有基础的列表展示功能，现在我们想在这基础上增加排序功能，这个时候我们就可以创建一个高阶组件SortList。
<template>
<BaseList v-bind="$props" v-on="$listeners"> BaseList>
template>