如何在HTML里面使用Vue组件（包含递归组件）

最新推荐文章于 2024-06-25 11:16:05 发布

海豹先生_

最新推荐文章于 2024-06-25 11:16:05 发布

阅读量4k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_57956183/article/details/131728333

版权

在讲解之前，大家可以看一下我的资源里的一个demo（产品流程态势图），里面就是在html里面使用的vue和vue组件，大家可以参考一下，如果有什么疑问，可以评论留言，我会及时的回复大家！

上期我们讲解了如何在html里面引入vue.js，这一期我们来讲解一下如何在html里使用vue组件，防止代码臃肿，方便我们维护，下面是一般组件在html里的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <!-- 创建一个根元素 -->
    <div class="home" id="home">
      <!-- 使用卡片组件 -->
      <card-Bg :card-Item="cardItem"></card-Bg>
    </div>


    <!-- 卡片组件开始 -->
    <template type="text/x-template" id="cardBg">
      <!-- 子组件的最外层必须有一个根元素 -->
      <div>
        <div>{{cardItem.name}}</div>
        <div>{{cardItem.id}}</div>
      </div>
    </template>
    <!-- 卡片组件结束 -->


    <script>
      Vue.component("cardBg", {
        template: "#cardBg",
        props: ["cardItem"],
        data() {
          return {};
        },
        methods: {},
      });
      // 将vue挂载到id为home的根元素上
      var vm = new Vue({
        el: "#home",
        data() {
          return {
            cardItem: {
              name: "子组件1",
              id: "1",
            },
          };
        },
        created() {},
      });
    </script>
  </body>
</html>

上面有两个注意点：

1、子组件必须有一个根元素，如图；

2、组件使用时的标签名字和传参时使用的命名不能用驼峰，需要用“-”连接，如图；

以上是vue组件在html中的使用，下面分享一个知识点：递归组件，首先说一下递归组件的使用场景，当接口返回的数据是一个树状结构时，我们需要使用递归组件将树状结构深层遍历出来，这个大家也可以参考我的资源里的“产品流程态势图”左侧树结构，下面是简单的代码实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <!-- 创建一个根元素 -->
    <div class="home" id="home">
      <!-- 使用递归卡片组件 -->
      <card-Bg :card-Item="cardItem"></card-Bg>
    </div>


    <!-- 递归卡片组件开始 -->
    <template type="text/x-template" id="cardBg">
      <!-- 子组件的最外层必须有一个根元素 -->
      <div>
        <div v-for="(item,index) in cardItem.children" :key="item.label">
          {{item.label}}
          <div v-if="item.children">
            <card-Bg :card-Item="item"></card-Bg>
          </div>
        </div>
      </div>
    </template>
    <!-- 递归卡片组件结束 -->


    <script>
      Vue.component("cardBg", {
        template: "#cardBg",
        props: ["cardItem"],
        data() {
          return {};
        },
        methods: {},
      });
      // 将vue挂载到id为home的根元素上
      var vm = new Vue({
        el: "#home",
        data() {
          return {
            cardItem: {
              label: "AM6.100.423",
              children: [
                {
                  label: "AM6.101.431",
                  children: [
                    {
                      label: "AM6.102.431",
                      children: [
                        {
                          label: "AM6.103.431",
                        },
                      ],
                    },
                  ],
                },
                {
                  label: "AM6.201.431",
                  children: [
                    {
                      label: "AM6.202.431",
                      children: [
                        {
                          label: "AM6.203.431",
                        },
                      ],
                    },
                    {
                      label: "AM6.202.432",
                      children: [
                        {
                          label: "AM6.203.432",
                        },
                        {
                          label: "AM6.204.432",
                        },
                      ],
                    },
                  ],
                },
                {
                  label: "AM6.301.431",
                },
              ],
            },
          };
        },
        created() {},
      });
    </script>
  </body>
</html>