Vue.js 不会在屏幕上显示多个组件

Posted 2023-02-23

【中文标题】Vue.js 不会在屏幕上显示多个组件

【英文标题】：Vue.js wont show more than one component on screen

【发布时间】：2019-01-21 13:28:55

【问题描述】：

我目前正在开发一个 vue.js 应用程序。我使用的是 CDN，而不是 CLI 安装。

我刚刚创建了这个组件

Vue.component('intro', 
    template: '<div id="intro">\n' +
    '<div class="content">\n' +
    '    <img src="images\\logo.svg"  id="logo">\n' +
    '<h2>Hello! My name is Juliana Villegas. I am an interactive media designer. I love mobile, web and creative development. <br> <span id="welcome">Welcome to my portafolio!</span></h2>\n' +
    '</div>\n' +
    '</div>'
)

我让它像这样出现在我的 html 中：

<div id="app">
    <intro></intro>

</div>

组件在屏幕上显示得很好，但我创建的其他所有内容都不可见。

我尝试复制它，甚至在<intro> 标记之后放置一个简单的<p>，但除了第一个组件之外，屏幕上没有显示任何内容。 我也尝试过使组件位置相对，但仍然没有。

是不是和vue有关，还是我css写错了？ 这是css如何走远

body
    background-color: black;
    overflow: scroll;

#stars-container
    z-index: 0;

#intro
    z-index: 99;
    width: 100vw;
    height: 100vh;
    display: flex;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;

#logo
    width: 30vw;
margin-bottom: 5vh;

img


h2
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    color: #FFFFFF;
    font-size: 16pt;

#welcome
    font-weight: 700;

p
color: #FFFFFF;

【问题讨论】：

#intro z-index: 99; width: 100vw; height: 100vh; 这个 CSS 选择器使 #intro 整页大小。向下滚动，您可能会在底部看到 <p> 元素。或打开浏览器控制台。

@Sphinx 我知道它应该是屏幕的全尺寸。问题是，即使我将介绍复制 4 次，它仍然显示一个。它不允许我滚动或任何东西。我试过检查，它告诉我有一个“

试试这个fiddle 我复制了你的代码...

【参考方案1】：

如果您想向组件添加数据，则可以将数据传递给它，以便它可以显示在其中。这就是道具的用武之地。

Props 是您可以在组件上注册的自定义属性。当一个值被传递给一个 prop 属性时，它就成为该组件实例上的一个属性。要将标题传递给您的组件，然后它可以使用道具将其包含在该组件接受的道具列表中

对于您的问题，我们可以通过以下方式将数据传递给组件。

Vue.component('intro', 模板：<div id="intro"> <h4>title</h4> <div class="content"> <img src="images\\logo.svg" id="logo"> <h2>Hello! My name is Juliana Villegas. I am an interactive media designer. I love mobile, web and creative development. <br> <span id="welcome">Welcome to my portafolio!</span></h2> </div> </div>, 道具：['标题'] );

然后通过以下方式将此模板包含在您的网页中。

然后页面看起来像这样..

This image show out put after template included in the webpage.

If you want to know more details then refer this once

【讨论】：

以这种方式将您的模板包含在您的网页中。