javascript - 通过初始化该属性，确保该属性是 react 性的，无论是在数据选项中，还是对于基于类的组件

Question

这是我的源代码和路径。

<template>
    <div class="">
        <c1 :text="message1"></c1>
        <c1 :text="message2"></c1>
    </div>
</template>

<script>
import c1 from '../components/c1.vue'

export default {
    components: {c1},
        data () {
            return {
                message1: 'hello world1',
                message2: 'hello world2',
            }
        }
}

path : ./pages/index.vue
---------------------------------------------------

<template>
    <div>
        <h1>c1 component</h1>
            <p>{{text}}</p>
    </div>
</template>

<script>
export default {
    props: ['text']
}
</script>

path : ./components/c1.vue

这是错误的结果。

 ERROR  [Vue warn]: Property or method "message1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Pages/index.vue> at pages/index.vue
       <Nuxt>
         <.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
           <Root>

 ERROR  [Vue warn]: Property or method "message2" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Pages/index.vue> at pages/index.vue
       <Nuxt>
         <.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
           <Root>

我是看书学习的。 为什么没有定义“message1”和“message2”？ 这是语法错误吗？ 注意nuxt的版本是2.6.3。 是版本问题吗？ 请告诉我如何修复它。

Answer 1

检查你的脚本标签在index.vue文件中是否正确关闭