I have a component that I would like to utilize within another component in order to create a navigation menu. I am looking to separate the menu from the links. How can I display data in a child component within another parent component while using Vue.js CDN? I am new to using vue.js so any help is appreciated. Thank you.
index.html
<div id="navbar"><navbar-div></navbar-div></div>
navbar.js:
Vue.component('navbar-content', {
props: ['name', 'link'],
template: '<a class="navbar-item" v-bind:href="link">{{ name }}</a>'
})
Vue.component('navbar-div', {
props: ['links'],
template: `
<nav class="navbar is-dark">
<div class="navbar-brand">[...]</div>
<div class="navbar-menu">
<nav class="navbar-start">
<navbar-content v-for="item in links"
v-bind:key="item.id"
v-bind:name="item.name"
v-bind:link="item.link">
</navbar-content>
</nav>
</div>
</nav>
`})
new Vue({
el: "#navbar",
data: {
links: [
{id: 1, name: "Item 1", link: "link1"},
{id: 2, name: "Item 2", link: "link2"}
],
}
})