[Vuejs]-Vue.js wont show more than one component on screen

0👍

if you want to add data to the component then you can pass data to it, such that it can displayed in it. That’s where props come in.

Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. To pass a title to your component, then it can include it in the list of props this component accepts, using a props

for your problem in below way we can pass the data to the component.

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’]
});

Then after include this template in your web page in below way.

then it the page appears like this..

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

If you want to know more details then refer this once

Leave a comment