Question

我有以下工作代码，显示在Vue中定义的数组元素：

var vm = new Vue({
  el: "#root",
  data: {
    numbers: [1, 2, 3]
  }
})

<div id="root">
  <div v-for="number in numbers">{{number}}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

我现在想将内部div移动到template。下面的代码是我认为会起作用的：

Vue.component(
  'numbers', {
    template: "#templ"
  }
)

var vm = new Vue({
  el: "#root",
  data: {
    numbers: [1, 2, 3]
  }
})

<div id="root">
  <numbers></numbers>
</div>

<template id="templ">
  <div v-for="number in numbers">{{number}}</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

这会在控制台中出现

[Vue警告]：属性或方法“数字”未定义实例，但在渲染期间引用。确保声明被动数据选项中的数据属性。（在组件＆lt; numbers＆gt;中找到）

这是否意味着组件中没有vm.numbers？我应该如何访问v-for和胡须表达式的此数据？

我怀疑我应该使用props：

Vue.component(
    'numbers',
    {
        template: "#templ",
        props: ['numbers']
    }
)

并相应地修改了HTML：

<numbers numbers="numbers"></numbers>

但是此方法传递字符串“numbers”而不是vm.numbers

Answer 1

您需要按如下方式定义模板：

<numbers :numbers="numbers"></numbers>

这是一个简短的语法：

<numbers v-bind:numbers="numbers"></numbers>

这可确保numbers对象作为props传递，而不是字符串＆＃34;数字＆＃34;

如何在组件中使用Vue VM变量？

1 个答案: