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>
/* 模板文件：*/
<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是可以这么用的
