Vue 笔记（二）- 从 component 到 slot

组件

定义组件：
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样。
注意 data 必须写成函数，避免组件被复用时，数据存在引用关系。

注册组件：
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)

关于组件名:
可以使用name配置项指定组件在开发者工具中呈现的名字。
使用<keep-alive>时也会用到组件名。

一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options

关于VueComponent
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！
4.VueComponent.prototype.__proto__ === Vue.prototype，即组件实例对象（vc）可以访问到 Vue 原型上的属性、方法。

脚手架

关于不同版本的Vue：
1.vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

ref

应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）。

props

props是只读的，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin

功能：可以把多个组件共用的配置提取成一个混入对象。

{
    data() {....},
    methods: {....},
    mounted() {...}
    ....
}

全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']
缺点：数据来源不清晰。

插件plugin

功能：用于增强Vue（类似于引入一个库，如lodash）
定义插件：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

使用插件：Vue.use()
常用插件：vuex, vue-router, element-ui等。

总结TodoList案例

组件通信（子 => 父）：父组件传递一个函数给子组件，让其调用。

webStorage

1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2.浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3.相关API：
(1)xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。(只能存String)
(2)xxxxxStorage.getItem('person');
(3)xxxxxStorage.removeItem('key');
(4)xxxxxStorage.clear() 该方法会清空存储中的所有数据。
4.备注：
(1) SessionStorage存储的内容会随着浏览器窗口关闭而消失。
(2) LocalStorage存储的内容，需要手动清除才会消失。

自定义事件

(备注：绑定==监听，解绑==不再监听)
1.一种组件间通信的方式，适用于：子组件 => 父组件
2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件。
3.绑定自定义事件：
(1).第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
(2).第二种方式，在父组件中：

<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

(3).若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
4.触发自定义事件：this.$emit('atguigu',数据)
5.解绑自定义事件：this.$off('atguigu')（即不再监听atguigu事件）
6.组件上也可以绑定原生DOM事件，需要使用native修饰符。(事件挂在组件内部的根元素上，这也是组件必须有根元素的原因之一)
7.注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！（这里的回调函数调用时会指定this，但methods中的函数已经被硬绑定了this，可能是经过了.bind(this)处理，所以不会出问题。）

全局事件总线

起源：
需要一个A，满足：1.所有组件都能访问到，2.它身上有$on, $emit等方法。（这样可以满足任意两个组件之间通信的需求）
挂在window上不合适，挂在VueComponent.prototype上也不合适，因为每次定义组件都会生成全新的VueComponent。可以挂在Vue.prototype上。
为了满足条件2，A可以是一个VueComponent实例，也可以是Vue实例。

1.一种组件间通信的方式，适用于任意组件间通信。
2.安装全局事件总线：

new Vue({
  ......
  beforeCreate() {
    Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
  },
  ......
})

3.使用事件总线：
(1). 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

(2). 提供数据：this.$bus.$emit('xxxx',数据)
4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布（pubsub）

1.一种组件间通信的方式，适用于任意组件间通信。
2.使用步骤：
(1). 安装pubsub：npm i pubsub-js
(2). 引入: import pubsub from 'pubsub-js'
3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

提供数据：pubsub.publish('xxx',数据)
最好在beforeDestroy钩子中，用pubSub.unsubscribe(pid)去取消订阅。

nextTick

语法：this.$nextTick(回调函数)
作用：在下一次 DOM 更新结束后执行其指定的回调。
什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

插槽slot

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 => 子组件。
2.分类：默认插槽、具名插槽、作用域插槽。
3.使用方式：
(1).默认插槽：

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

(2). 具名插槽：

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

(3).作用域插槽：
解决的问题：父组件传入的HTML结构中需要使用子组件的数据。
具体编码：

父组件中：
        <Category>
            <template slot-scope="scopeData">
                <!-- 生成的是h4标题 -->
                <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
            </template>
        </Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
        
        <script>
            export default {
                name:'Category',
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

略

Vue封装的过度与动画（视频91-95）
Vue脚手架配置代理（视频96-97）
github案例（视频98-100）