登录
首页 >  文章 >  前端

为什么我的Vue组件同时加载时只显示了一个？

时间：2024-12-02 18:51:55 465浏览 收藏

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《为什么我的Vue组件同时加载时只显示了一个？》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

为什么我的Vue组件同时加载时只显示了一个？

vue组件同时加载问题

在vue应用程序中，您定义了两个自定义组件<header-bar>和<nav-bar>。但是，您发现在同时加载这两个组件时，只会显示一个组件。

问题根源

问题在于您在<script>标签中错误地将组件声明为自闭合标签：

<script src="../assets/scripts/base.js"></script>
<script src="../assets/scripts/index.js"></script>
<script>
  var vm = new vue({
    el:".content", // 这里有两个点
    data:{}
  })
</script>

vue组件应声明为非自闭合标签，如下所示：

<script src="../assets/scripts/base.js"></script>
<script src="../assets/scripts/index.js"></script>
<script>
  var vm = new vue({
    el:".content",
    data:{}
  })
</script>

此外，在您的<div>元素中，您将组件声明为自闭合标签：

<div class="content">
  <header-bar/> // 这里有一个自闭合标签
  <nav-bar/> // 这里有一个自闭合标签
</div>

正确的写法是：

<div class="content">
  <header-bar></header-bar> // 这里是非自闭合标签
  <nav-bar></nav-bar> // 这里是非自闭合标签
</div>

修正后代码

应用这些更正后，以下是修改后的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue"></script>
    <title>Document</title>
</head>

<body>
    <div class="content">
        <header-bar></header-bar>
        <nav-bar></nav-bar>
    </div>
</body>

<script>
    Vue.component("header-bar", {
        data: function() {
            return {
                homeHref: 'https://www.cnblogs.com',
                logo: 'https://cn.vuejs.org/images/logo.png',
                title: 'Vue官网图标',
                hotTel: '实例'
            }
        },
        template: `
            <header>
                <div class="heading">
                    <a :href="homeHref" class="logo">
                        <img :src="logo" :alt="title" />
                    </a>
                    <div class="hotphone">
                        <div class="icon"></div>
                        <div class="text">
                            <h2>全国免费加盟热线：</h2>
                            <h1>{{hotTel}}</h1>
                        </div>
                    </div>
                </div>
            </header>
    `
    });
    Vue.component("nav-bar", {
        data: function() {
            var n = 0;
            if (window.navActive) {
                n = window.navActive;
            }
            return {
                navList: [{
                    href: 'https://www.cnblogs.com',
                    title: '博客园'
                }],
                navActive: n
            }
        },
        template: `
        <nav>
            <div class="navbar">
                <template v-for="(nav,index) in navList">
                     <a :href="nav.href" class="navmenu" v-html="nav.title"></a>
                </template>
            </div>
        </nav>
    `,
        mounted: function() {
            $("a.navmenu").eq(this.navActive).addClass("active");
        }
    });

    new Vue({
        el: '.content',
    })
</script>

</html>

到这里，我们也就讲完了《为什么我的Vue组件同时加载时只显示了一个？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>