vue.js 三层父子组件通信

Question

new Vue({//爷爷
				el:"#example-2",
	         	components: {
				    'u-component':  {//儿子
						template: '<div><mini-child v-bind:display="display" v-bind:message="message"></mini-child>A custom component!</div>',
					  	data:{
					  		display:true,
					  		message:"Message in parent"
					  	},
						components:{
					  		"mini-child": {//孙子
								template:'<div>一个孙子<p v-if="display">!!!!</p>{{message}}</div>',
								props:["display","message"]
							}
					  	}
					}
				}
			})

vue.js:435 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.warn @ vue.js:435
vue.js:435 [Vue warn]: Property or method "display" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <UComponent>
       <Root>warn @ vue.js:435
vue.js:435 [Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <UComponent>
       <Root>

求帮帮，这个是什么问题呢？

Answer 1

.....data必须是个函数