Vue.js is 属性如何实现页面异步路由

最新推荐文章于 2025-03-11 15:52:18 发布

原创最新推荐文章于 2025-03-11 15:52:18 发布 · 466 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css #vue.js #html

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文探讨HTML的is特性，解释其如何用于元素复用和开发便捷，特别是在Vue.js中实现动态组件切换的场景。通过示例代码，展示了如何利用is属性结合Vue的component标签实现在不同组件间的动态切换。

**在html中很多语法都是固定的写法
比如 ul 里面只能是 li tr里面是td

而is的这个属性就是为了里面元素的复用跟开发便捷

is特性——就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签，这时候就要用is代替一下，让html语法符合规则验证。is属于指定要在内部使用的标签。
文档链接：https://cn.vuejs.org/v2/guide/components.html
好了不废话直接上代码

<template>
  <div class="home">
    <!-- 点击切换组件 -->
    <button @click="onClick">点击切换组件</button>
    <!-- 使用is动态组件切换 -->
    <component :is="componentId"></component>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {
    // 按需引入组件
    // 这是异步加载的，不是用就不会加载
    FooShow(resolve){
      require(["../components/Foo"],resolve)
    },
    BarShow(resolve){
      require(["../components/Bar"],resolve)
    }
  },
  data() {
      return {
        // is绑定的就是这个key值，这个value值是在components里面的组件名
        componentId:"FooShow",
      }
    },
    methods: {
      onClick(){
        // 这里切换的时候就会加载这个组件
        this.componentId = "BarShow"
      }
    },
};
</script>