vue 父组件给子组件传值问题

想通过props 给子组件传值,但是一直被报错,说子组被传递的值未定义

clipboard.png

 components: {
                //父组件
                comments: {
                    //评论组件
                    props: ['msg','edit'],
                    methods: {
                        test: function () {
                            console.log(this)
                        }
                    },
                    data: function () {
                        return {
                            isShow: true,
                            showRepaly: false,
                            repalyText: '回复',
                           
                            isNeedReplay: true,
                           
                        }
                    },
                                    
                    template:` <div class="media" v-show='isShow'>
                                        <a class="pull-left">
                                            <img src="/Areas/Mpa/Views/Live/img/avator.png" class="media-object" />
                                        </a>
                                        <div class="media-body">
                                            <h4 class="media-heading">
                                                {{msg.userName}}
                                                <span v-if="edit">
                                                   {{msg.creationTime|formatUTC}} /
                                                    <a @@click='del'>
                                                       @L("Delete")
                                                    </a>
                                                    <a @@click='toggleRel' v-show='isNeedReplay'>
                                                            {{repalyText}}
                                                      </a>

                                                </span>
                                            </h4>
                                            <p>
                                            {{msg.theme}}
                                            </p>
                                           <transition name="stretch">
                                           <replay  :sg="isShow" v-show="showRepaly" ></replay>
                                           </transition>
                                           
                                            <hr>
                                        <slot></slot>
                                        </div>
                                  </div>`,
                    //子组件
                    components: {
                        replay: {
                            props: ['sg'],
                            data: function () {
                                return {
                                    commentText: ''
                                }
                            },
                            created: function () {
                                console.log(sg)
                            },                           
                            template: `<div class="post-comment">
                                <form role="form" >
                                    <div class="form-group">
                                        <textarea class="col-md-10 form-control" rows="3" v-model="commentText"></textarea>
                                    </div>
                                    <button class="margin-top-20 btn blue" type="submit"    @@click.prevent="submit">@L("Submit")</button>
                                </form>
                            </div>`
                        }

                    }

                }

            },
阅读 3.3k
3 个回答

console.log(this.sg)

是console里面的sg没定义,换成this.sg

vue1.0 版本 用 vm.sg
vue2.0 版本 用 this.sg

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题