javascript - vue.js 2.0 父组件props过来的data 在子组件模板直接使用报错

问题描述

问 题

报错信息：

Property or method "title" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

代码如下

    /* .vue文件 */
    <template src="./Modal.tpl"></template>

    <script>
    export default {
        // 该组件只是简单的弹窗盒子
        props:['modal'],

        methods:{
            cancel:function(){
                // 如果需要跟父级组件有除了显示与hide之外的逻辑可在这里冒泡
                this.modal.show = false;
            },

            //阻止冒泡
            cancelBubble:function(e){
                if(e && e.stopPropagation){
                    e.stopPropagation();
                }else{
                    window.event.cancelBubble = true;
                }
            }
        }
    }
</script>

/* 模板文件：*/
<div class="modal-open" v-show="modal.show">
    <div class="modal chenyou-modal default-modal" @click="cancel">
        <div class="modal-dialog" :class="[modal.size == 'sm' ? 'modal-sm' : '', modal.size == 'lg' ? 'modal-lg' : '']">
            <div class="modal-content" @click.stop="cancel">
                <div class="modal-header">
                    <button type="button" class="close" @click="cancel" >
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel" v-if="title !== ''">{{modal.title || '提示'}}</h4>
                </div>

                <div class="modal-body">
                    <slot name="modal-body"></slot>
                </div>

                <div class="modal-footer">                
                    <button type="button" class="btn btn-danger" data-dismiss="modal" @click="cancel">
                        <i class="ti-close"></i> {{ modal.cancelBtnText || '取消'}}</button>
                    <slot name="modal-footer"></slot>
                </div>
            </div>
        </div>
    </div>
</div>

这是一个弹框子组件，modal是从父组件传过来的。在1.0是可以这么用的

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

嗯…其实在发完这个问题 我就知道为什么报错了 也申请了关闭问题 可是segmentfault老是不让关闭问题 title是很久之前弥留下来的 其实是没有用的 传过来的modal里并没有title…1.0不报错可是2.0就会报错

这篇关于javascript - vue.js 2.0 父组件props过来的data 在子组件模板直接使用报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！