javascript - Vue2 & $refs & Cannot read property 'msg' of undefined - Stack Overflow

admin管理员组

文章数量:1402920

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

1. msg of child ponent 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-ponent" ref='parent'>
      <div>
        <child-ponent1></child-ponent1>
        <child-ponent2></child-ponent2>
        <button v-on:click="showChildData">Show child ponent data</button>
        </div>
      </template>

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

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

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

Here's JavaScript:

    Vueponent('parent-ponent',{
        template: '#parent-ponent',
        ponents: {
            'child-ponent1': {
                template: '#child-ponent1',
                data: function(){
                    return {
                        msg: 'This is data of cc1'
                    };
                },
                methods: {
                    showParentData: function(){
                        alert(this.$parent.msg);
                    }
                }
            },
            'child-ponent2': {
                template: '#child-ponent2',
                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.$refs2.msg);

            }
        }
    });


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

Code in JSFaddle

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

1. msg of child ponent 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-ponent" ref='parent'>
      <div>
        <child-ponent1></child-ponent1>
        <child-ponent2></child-ponent2>
        <button v-on:click="showChildData">Show child ponent data</button>
        </div>
      </template>

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

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

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

Here's JavaScript:

    Vue.ponent('parent-ponent',{
        template: '#parent-ponent',
        ponents: {
            'child-ponent1': {
                template: '#child-ponent1',
                data: function(){
                    return {
                        msg: 'This is data of cc1'
                    };
                },
                methods: {
                    showParentData: function(){
                        alert(this.$parent.msg);
                    }
                }
            },
            'child-ponent2': {
                template: '#child-ponent2',
                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.$refs2.msg);

            }
        }
    });


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

Code in JSFaddle

• javascript
• vue.js
• vuejs2
• refs

Share Improve this question Follow edited Jan 16, 2017 at 10:34 Divins Mathew 3,18644 gold badges2424 silver badges3434 bronze badges asked Jan 16, 2017 at 9:19 Yao IrisYao Iris 3811 gold badge11 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

<child-ponent1 ref="cc1"></child-ponent1>
<child-ponent2 ref="cc2"></child-ponent2>

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

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

本文标签： javascriptVue2 amp refs amp Cannot read property 39msg39 of undefinedStack Overflow