时间戳

首页 > 解决方案 > Vue.js 不会在屏幕上显示多个组件

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

问题描述

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

我刚刚创建了这个组件

Vue.component('intro', {
    template: '<div id="intro">\n' +
    '<div class="content">\n' +
    '    <img src="images\\logo.svg" alt="" 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>

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

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

是否与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;
}

标签： javascriptwebvue.jscomponentsvue-component

解决方案

如果要向组件添加数据，则可以将数据传递给它，以便它可以显示在其中。这就是道具进来的地方。

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

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

Vue.component('intro', { template: <div id="intro"> <h4>{{title}}</h4> <div class="content"> <img src="images\\logo.svg" alt="" 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>, props:['title'] });

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

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

此图像显示在网页中包含的模板之后。

如果您想了解更多详细信息，请参考一次

推荐阅读