Question

我使用$refs来绑定子组件，但无法从父组件$ref.refname.msg获取子组件的值。（我尝试了$children可以工作）。

子组件的消息。
msg信息可以通过parent.$chidren.msg获得。

但错误表明：

未捕获的TypeError：无法读取未定义的属性“msg”。

这是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://vuejs.org/v2/guide/components.html#Child-Component-Refs

的官方文档

Vue2＆amp; $ refs＆amp;无法读取未定义的属性'msg'

1 个答案: