通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件

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://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://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 文件中正确关闭