第三阶段 Vue day07

自定义事件的补充

- 1. 绑定在组件标签上的都是自定义事件，也就是需要组件内部去通过 $emit 去触发的

- 2. 原生事件与自定义事件的 $event 的不同

    - 1. 原生事件的 $event 是事件对象，$event.target DOM对象

    - 2. 自定义事件的 $event , 是触发这个事件时，传递的是啥就是啥

 v-model的缺陷

- 在标签名上的时候

    - v-model虽然可以双向绑定数据，但是其默认

        - v-model的属性默认是value

        - v-model的事件默认是input

    - 所以我们需要通过model来改变默认

 .native

- 1. 组件上绑定的事件都是自定义事件，

- 2. 如果需要绑定原生事件，需要添加一个修饰符 .native (原生)

- 3. 加上 .native 绑定的原生事件，默认会绑定到组件的根元素身上。

- 通俗的讲就是引用组件标签上的事件能自己用

.sync

- .sync 修饰符和 v-bind 配合使用

- 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用

- 类似 v-model

update:myPropName 才可以执行

 插槽

- 1. slot的用法(插槽)

    + 1.1  编译作用域

        - 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

    + 1.2 后备内容

        - slot中放置内容，它只会在没有提供内容的时候被渲染

    + 1.3 具名插槽(具有名字的插槽)

        - 放置多个插槽时，需要名字

            - 对于这样的情况，slot元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽

                1. 使用 template 标签包裹

                2. 在 template 标签上 使用 v-slot:坑的名字

            - 在向具名插槽提供内容的时候，我们可以在一个 template元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

            - 一个不带 name 的 slot出口会带有隐含的名字“default”。

        - 作用域插槽

            - 绑定在slot元素上的 attribute 被称为插槽 prop。

      <span>

                    <slot v-bind:user="user">

                        {{ user.lastName }}

                    </slot>

      </span>

            - 现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字

<template              

        v-slot:default="slotProps">

        {{ slotProps.user.firstName }}

 </template>

 keep-alive  包裹 动态组件之间切换  

- 使包裹在里面得组件会被缓存

- 有条件的缓存

    - include 只有名称匹配的组件会被缓存

        - 字符串   多个用逗号分割

        - 正则表达式

        - 数组

    - 任何名称匹配的组件都不会被缓存

    - max - 数字。最多可以缓存多少组件实例

- 两个新的生命周期函数

    - deactivated() 失活

    - activated() 激活

- 当销毁组件的时候要清除定时器，滚动条事件

 ref 特殊属性

- 一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例

- 使用步骤

    1. 给元素标签或组件标签设置一个 ref 属性。比如 ref="xxx"

    2. 通过 this.$refs.xxx 获取

- 作用

    - 获取 子元素 的真实DOM对象，获取 子组件 的实例对象

this.$refs.aaa.changeName("里斯");

this.$refs['bbb'].innerHTML = "99999"

 实例中的各种$xxx

- $refs

- $emit

- $mount

- $event

- $set

- $props    将所有的prop收集到一个对象上

- $attrs    将所有的非prop收集到一个对象上

- $el       当前组件的根元素的DOM对象

- ...

 provide和inject

- 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，

      不论组件层次有多深，并在其上下游关系成立的时间里始终生效

    - provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。

    - inject：选项：一个字符串数组，或

                    一个对象，对象的 key 是本地的绑定名

- 提示

    - provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的

事件总线($eventBus)

- 步骤

    1. 实例化一个空的Vue的实例对象

            `const eventBus = new Vue();`

    2. 讲eventBus挂载到Vue的原型上

            `Vue.prototype.$eventBus = eventBus;`

    3. 使用eventBus绑定一个事件

            `this.$eventBus.$on("xxx",this.fn);`

    4. 使用 eventBus 触发 xxx 事件

            `this.$eventBus.$emit("xxx", 123);`

    5. 使用eventBus解绑一个事件

            `this.$eventBus.$off("xxx", this.xxxFn);`

- myEvent

const store = {

    // key:value

    //  key - 事件名

    //  value - 事件回调函数组

}

const myEvent = {

    // $on: function (eventName, callback) {

    //     store[eventName] = callback;

    // },

    $on:function(eventName,callback) {

        if(stroe[eventName]<0){

            store[eventName] = [];

        }

        store[eventName].push(callback);

    },

    $emit: function (eventName, payload) {

    if (store[eventName]) {

      store[eventName](payload);

    }

  },

}

组件实例除了有 $xxx 的属性之外。还有一些 $xxx 的方法

• $on() 绑定自定义事件

• $once() 绑定一次性自定义事件

• $emit() 触发自定义事件

• $off() 解绑

 

使用步骤

1.在 new Vue 之前，额外实例化一个空的 Vue 实例对象（不需要传递任何选项），用做 事件总线 EventBus

const eventBus = new Vue()
​
new Vue({
    el: '#app'
})

2.为了将 eventBus 这个东西，在所有组件中都能使用到，将其挂载到 Vue 的原型身上。

Vue.proxxss.eventBus = eventBus

3.A组件要通知B组件

3.1 B组件在 created 中使用 eventBus 绑定一个事件 $on(eventName, () => {})

3.2 A组件在 合适的时机 使用 eventBus 触发B组件中绑定的那个事件名 $emit(eventName)