Vue动态组件的用法（附带实例）

动态组件是 Vue 开发中经常会使用的一种高级功能。有时页面中的某个位置要渲染的组件并不是固定的，可能会根据用户的操作而渲染不同的组件。这时就需要用到动态组件。

还记得 Radio 单选框组件吗？当用户选择了不同的选项后，切换页面渲染的组件是非常常见的需求，使用动态组件可以非常方便地处理这种场景。

首先，新建一个名为 demo.dynamic.html 的测试文件，编写如下示例代码：

<div id="Application">
  <input type="radio" value="page1" v-model="page" /> 页面 1
  <input type="radio" value="page2" v-model="page" /> 页面 2
  <div>{{ page }}</div>
</div>

<script>
  const { createApp, ref } = Vue;

  const App = createApp({
    setup() {
      const page = ref("page1");
      return { page };
    }
  });

  App.mount("#Application");
</script>

运行上述代码后，将会在页面中渲染出一组单选框，当用户切换选项后，其 div 标签中渲染的文案会对应修改。在实际应用中，并不只是修改 div 标签中的文本这样简单，通常会采用更换组件的方式进行内容的切换。

定义两个 Vue 组件如下：

const { createApp, ref } = Vue;

const App = createApp({
  setup() {
    const page = ref("page1");
    return { page };
  }
});

// 定义页面组件1
const page1 = {
  template: `<div style="color:red">页面组件1</div>`
};

// 定义页面组件2
const page2 = {
  template: `<div style="color:blue">页面组件2</div>`
};

App.component("page1", page1);
App.component("page2", page2);
App.mount("#Application");

page1 组件和 page2 组件本身非常简单，使用不同的颜色显示简单文案。现在我们要将页面中的 div 元素替换为动态组件，示例代码如下：

<div id="Application">
   <input type="radio" value="page1" v-model="page"/>页面1
   <input type="radio" value="page2" v-model="page"/>页面2
   <component :is="page"></component>
</div>

component 是一个特殊的标签，其通过 is 属性来指定要渲染的组件名称。如以上代码所示，随着 Vue 应用中 page 属性的变化，component 所渲染的组件也是动态变化的，效果如下图所示。

图 1 动态组件的应用

注意，上面我们使用 component 方法定义的组件是全局组件。对于小型项目来说，这种开发方式非常方便，但是对于大型项目来说，缺点也很明显：

首先全局定义的模板命名不能重复，在大型项目中可能会使用到非常多的组件，维护困难；
在定义全局组件的时候，组件内容是通过字符串格式的 HTML 模板定义的，在编写时对开发者来说不太友好，并且全局模板定义中不支持使用内部的 CSS 样式。

这些问题都可以通过单文件组件技术解决。

Vue动态组件的用法（附带实例）

相关文章