Vue.js use component in another

user_15675281 0
Viewed 117

I have a component that I would like to use in another in order to make a navigation menu. I want separate the menu from links. How can I display data in a child component in another parent component? I use Vue.js CDN.

I am a newbie in using vue.js. Thank you for your help.

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"}
            ],
        }
})
vue-component vue.js javascript
1 Answers

In your HTML you have to bind the links to navbar-div; otherwise it's not going to receive the data as props

Vue.component('navbar-content', {
  props: ['name', 'link'],
  template: `
    <a
      class="navbar-item"
      :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"
            :key="item.id"
            :name="item.name"
            :link="item.link"
          />
        </nav>
      </div>
    </nav>
  `
})

new Vue({
  el: "#navbar",
  data: {
    links: [{
        id: 1,
        name: "Item 1",
        link: "link1"
      },
      {
        id: 2,
        name: "Item 2",
        link: "link2"
      }
    ],
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="navbar">
  <navbar-div :links="links"></navbar-div>
</div>

user_23165400
Related