• 07 【动态组件 组件注册】

    13.动态组件

    13.1 基本使用

    composition api写法：只适用于vue3

    • 在 
    


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    提示

    用 markRaw 也可以，但是不如shallwRef直观与方便。

    13.2 官方案例

    有些场景会需要在两个组件间来回切换，比如 Tab 界面：

    




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    image-20220808210314991

    上面的例子是通过 Vue 的 元素和特殊的 is attribute 实现的：

    


    • 1
    • 2

    在上面的例子中，被传给 :is 的值可以是以下几种：

    • 被注册的组件名
    • 导入的组件对象

    你也可以使用 is attribute 来创建一般的 HTML 元素。

    当使用 来在多个组件间作切换时，被切换掉的组件会被卸载。我们可以通过 `` 组件强制被切换掉的组件仍然保持“存活”的状态。

    14.组件注册

    14.1 全局注册#

    例如组件使用频率非常高（table，Input，button，等）这些组件 几乎每个页面都在使用便可以封装成全局组件

    我们可以使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用。

    import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    如果使用单文件组件，你可以注册被导入的 .vue 文件：

    import MyComponent from './test.vue'

app.component('MyComponent', MyComponent)

    • 1
    • 2
    • 3

    app.component() 方法可以被链式调用：

    app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

    • 1
    • 2
    • 3
    • 4

    全局注册的组件可以在此应用的任意组件的模板中使用：

    




    • 1
    • 2
    • 3
    • 4

    所有的子组件也可以使用全局注册的组件，这意味着这三个组件也都可以在彼此内部使用。

    14.2 局部注册#

    全局注册虽然很方便，但有以下几个问题：

    1. 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
    2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

    相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

    在使用

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    如果没有使用