Vue.js 在另一个中使用组件

Question

我有一个组件，我想在另一个组件中使用它来制作导航菜单。我想将菜单与链接分开。如何在另一个父组件中显示子组件中的数据？我使用 Vue.js CDN。

我是使用 vue.js 的新手。谢谢你的帮助。

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"}
            ],
        }
})

Answer 1

在您的 HTML 中，您必须将 links 绑定到 navbar-div；否则它不会接收数据 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>

Vue.js 在另一个中使用组件

Vue.js use component in another

javascript

vue.js

vue-component