为什么我的Vue组件同时加载时只显示了一个？-js教程-PHP中文网

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

碧海醫心

发布： 2024-11-05 21:16:24

原创

764人浏览过

为什么我的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组件应声明为非自闭合标签，如下所示：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

<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组件同时加载时只显示了一个？的详细内容，更多请关注php中文网其它相关文章！