Vue2 & $refs & Cannot read property 'msg' of undefined

Question

I use $refs to bind the child component but Can not get the value of child component from parent component thorough $ref.refname.msg. (I have tried $children which could work).

1. msg of child component has been defined.

2. msg info could be got through parent.$chidren.msg.

But the error showed that:

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

Here's HTML code.

     <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>

Here's 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

You should put ref="xx" on the child components, not the templates.

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

Templates are just templates, the parent component cannot ref to them.

Here is the official document for the usage of ref: https://vuejs.org/v2/guide/components.html#Child-Component-Refs