javascript - Vue2 & $refs & 无法读取未定义的属性 'msg'

Question

我使用$refs绑定(bind)子组件，但无法通过$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>

模板只是模板，父组件无法引用它们。

这里是ref的使用官方文档:https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs