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

Question

报错信息：

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>

/* 模板文件：*/
<p class="modal-open" v-show="modal.show">
    <p class="modal chenyou-modal default-modal" @click="cancel">
        <p class="modal-dialog" :class="[modal.size == 'sm' ? 'modal-sm' : '', modal.size == 'lg' ? 'modal-lg' : '']">
            <p class="modal-content" @click.stop="cancel">
                <p 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>
                </p>

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

                <p 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>
                </p>
            </p>
        </p>
    </p>
</p>

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

Answer 1

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

Answer 2

<h4 class="modal-title" id="myModalLabel" v-if="title !== ''"> =>
<h4 class="modal-title" id="myModalLabel" v-if="modal.title !== ''">

没有比踩这个答案更丧心病狂的了

你高兴就好