vue 高级特性

自定义 v-model

代码参考 vue-demo

$nextTick

代码参考 vue-demo

顺便用了 ref 获取一个 DOM 节点。 另外，ref 也可以被用于获取一个组件的实例。

slot

代码参考 vue-demo

作用域插槽

代码参考 vue-demo

即子组件管理数据，父组件通过插槽的作用域来获取。

具名插槽，参考以下代码示例

<!-- NamedSlot 组件 -->
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<NamedSlot>
  <template v-slot:header> <!-- 缩写 <template #header> -->
    <h1>将插入 header slot 中</h1>
  </template>

  <p>将插入到 main slot 中，即未命名的 slot</p>

  <template v-slot:footer>
    <p>将插入到 footer slot 中</p>
  </template>
</NamedSlot>

动态组件

关键代码如下，其中 TplDemoName 要有定义

<component v-bind:is="TplDemoName"></component>

import TplDemo from '../BaseUse/TplDemo'

export default {
    components: {
        TplDemo
    },
    data() {
        return {
            TplDemoName: 'TplDemo'
        }
    }
}

异步组件

代码参考 vue-demo

keep-alive

代码参考 vue-demo

mixin

代码参考 vue-demo

【注意】mixin 不是完美的解决方案，它的变量作用域不明确 。 vue3 的 composition API 也是想解决这问题。

React mixins 的缺点 Vue mixins 也同样适用