无法将 Vue 数据传递给 Vue 组件答案

【问题标题】：Can't pass Vue data into Vue component无法将 Vue 数据传递给 Vue 组件
【发布时间】：2019-02-14 15:03:57
【问题描述】：

我似乎无法将 Vue 数据从内联模板传递到 Vue 组件。

我收到了这个错误：

vue.min.js: Uncaught TypeError: Cannot read property 'type' of undefined

下面是我正在使用的示例代码：

Vue.component('data-item', {
  props: ['food'],
  template:"<li>{{food}}</li>"
})


var content = new Vue({
  el: '#content',
  data: {
    value: 'hello value!'
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="content">
  <!-- this works
  <ol>
    <li>{{value}}</li>
  </ol>
  -->
  
  <!-- passing data from vue instance to component doesn't work -->
  <ol>
    <data-item  v-bind:food="value" inline-template></data-item>
  </ol>
  
</div>

【问题讨论】：

如果设置了template: "<li>{{food}}</li>"，为什么还需要inline-template？

标签： javascript vue.js

【解决方案1】：

您正在尝试使用 inline-template 而不包含内联模板。 inline-template 将组件的 template 替换为其 DOM 节点内的任何内容；你会收到undefined，因为它是空的。

如果你想使用内联模板：

Vue.component('data-item', {
  props: ['food'],
  template: "<li>This will be ignored in favor of the inline-template: {{food}}</li>"
})

var content = new Vue({
  el: '#content',
  data: {
    value: 'hello value!'
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="content">
  <ol>
    <data-item v-bind:food="value" inline-template>
      <li>I am the inline template: {{food}}</li>
    </data-item>
  </ol>
</div>

如果您想改用data-item 的“模板”，请不要在元素上包含inline-template：

Vue.component('data-item', {
  props: ['food'],
  template:"<li>I am the component template: {{food}}</li>"
})

var content = new Vue({
  el: '#content',
  data: {
    value: 'hello value!'
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="content">
  <ol>
    <data-item v-bind:food="value">
      I am the contents of the DOM node, which will be
      replaced by data-item's template.
    </data-item>
  </ol>
</div>

【讨论】：

【解决方案2】：

你可以使用is属性

   Vue.component('data-item', {
      props: ['food'],
      template:"<li>{{food}}</li>"
    })

    var content = new Vue({
      el: '#content',
      data: {
      value: 'hello value!'
      }
    })


    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
    <div id="content">
      <ol>
        <li is="data-item" v-bind:food="value"></li>
      </ol>
    </div>

【讨论】：