Vue2＆$ refs＆未定義の 'msg'プロパティを読み取ることができません

Question

私は$refsを使用して子コンポーネントをバインドしますが、子コンポーネントの値を親コンポーネントから$ref.refname.msgまで取得できません。 （私は$childrenを試しましたが動作します）。

1. 子コンポーネントのmsgが定義されています。

2. msgの情報はparent.$chidren.msgです。

   Uncaught TypeError: Cannot read property 'msg' of undefined.

   はここでHTMLコードです：

しかし、エラーがあることを示しました。

 <template id="parent-component" ref='parent'> 
     <div> 
     <child-component1></child-component1> 
     <child-component2></child-component2> 
     <button v-on:click="showChildData">Show child component data</button> 
     </div> 
     </template> 

     <template id="child-component1" ref="cc1"> 
     <div> 
      <span> This is child component 1.</span> 
      <button v-on:click="showParentData">Show parent component data</button> 
     </div> 
     </template> 

     <template id="child-component2" ref="cc2"> 
     <div> 
      <span> This is child component 2.</span> 
      <button v-on:click="showParentData">Show parent component data</button> 
     </div> 
     </template> 

     <div id="e15"> 
     <parent-component></parent-component> 
     </div> 

ここではJavaScriptです：

Vue.component('parent-component',{ 
     template: '#parent-component', 
     components: { 
      'child-component1': { 
       template: '#child-component1', 
       data: function(){ 
        return { 
         msg: 'This is data of cc1' 
        }; 
       }, 
       methods: { 
        showParentData: function(){ 
         alert(this.$parent.msg); 
        } 
       } 
      }, 
      'child-component2': { 
       template: '#child-component2', 
       data: function() { 
        return { 
         msg: 'This is data of cc2', 
         num: 12 
        }; 
       }, 
       methods: { 
        showParentData: function(){ 
         alert(this.$parent.msg); 
        } 
       } 
      } 
     }, 
     data: function() { 
      return { 
       msg: 'This is data of parent.' 
      }; 
     }, 
     methods: { 
      showChildData: function(){ 


       for(var i=0;i<this.$children.length;i++){ 
        alert(this.$children[i].msg); 
        // console.log(this.$children[i]); 
       } 
       //!!!!This line doesn't work!!! 
       alert(this.$refs.cc2.msg); 

      } 
     } 
    }); 


    var e15 = new Vue({ 
     el: '#e15' 
    }); 

Code in JSFaddle

Answer 1

あなたは子コンポーネントではなく、テンプレートにref="xx"を置く必要があります。

<child-component1 ref="cc1"></child-component1> 
<child-component2 ref="cc2"></child-component2> 

テンプレートは単なるテンプレートなので、親コンポーネントはそれらを参照できません。解決https://vuejs.org/v2/guide/components.html#Child-Component-Refs