如何在組件中使用Vue VM變量？

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公司提醒]：屬性或方法「數字」沒有定義上在渲染期間引用 實例。確保在數據選項中聲明反應性數據屬性 。 （以組件<號發現>）

這是否意味着vm.numbers不可用的組件？我應該如何訪問v-for和小鬍子表達式的這些數據？

我懷疑，我應該使用props：

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

，並相應修改HTML：

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

但這種方法將字符串 「數字」，而不是vm.numbers

Answer 1

您需要定義您的模板如下：

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

，其爲短手語法：

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

這確保了numbers對象作爲props而不是字符串「數字」