[Vue警告]：ディレクティブの解決に失敗しました：ref

Question

Vue.jsのコンポーネントについて学習しています。

<script type="text/template" id="child1"> 
    <h3>This is the child1~!</h3> 
</script> 
<script type="text/template" id="child2"> 
    <h3>This is the child2~!</h3> 
</script> 
<script id="parent" type="text/template"> 
    <div> 
     <h2>This is the parent~!</h2> 
     <child1 v-ref:cc1></child1> 
     <child2 v-ref:cc2></child2> 
     <button v-on:click="getChildren">get children msg</button> 
    </div> 
</script> 

とJSは次のとおりです：

テンプレートがある

Vue.component('parent', { 
     template: '#parent', 
     methods: { 
      getChildren:function() { 
       alert(this.$refs.cc1); 
       alert(this.$refs.cc2); 
      } 
     }, 
     components: { 
      'child1': { 
       template: '#child1', 
       data: function() { 
        return { 
         msg: 'This is the child1 ~!' 
        } 
       } 
      }, 
      'child2': { 
       template: '#child2', 
       data: function() { 
        return { 
         msg: 'This is the child2 ~!' 
        } 
       } 
      } 
     } 
    }); 

Vueのは

を投げるには警告：vue.js：525 [Vueのは、警告は]：解決に失敗しました指令：ref（ コンポーネントにあります）

誰に教えてもらえますか？ありがとう！

Answer 1

あなたはVueの1.0 grammaでのVue 2.0を使用している：

は、移行のマニュアルを参照してください。

https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

だから、あなたが使用する必要があります。

<child1 ref="cc1"></child1> 
<child2 ref="cc2"></child2> 

またはVueのバージョンを1.xに戻してください

Answer 2

あなたのコンポーネントテンプレートでパグ（旧ジェイド）を使用している場合を除き、あなたはHTMLを使用する必要があります。

template: '<div id="parent"></div>',