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

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文件中是否正确关闭