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必须是个函数