コンポーネントで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>

私は今templateにインナーdivを移動したいです。 [ヴューが警告]

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>

これは、コンソール

に発生します：プロパティまたはメソッド「数字」は上に定義されていない以下のコードは、私が働いてしまうと思ったものです インスタンスですが、レンダリング中に参照されます。データオプションでは、反応性のある データプロパティを宣言してください。

（>コンポーネント<数字で見つかった）これは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オブジェクトではなく、文字列「数字」のprops