Vue 脚手架学习记录

最新推荐文章于 2023-01-02 12:26:36 发布

qintaipeng

最新推荐文章于 2023-01-02 12:26:36 发布

阅读量113

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qintaipeng/article/details/105528809

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文记录了在Vue项目中，针对子组件数据处理的一个常见问题，即如何正确地将data定义为函数形式，以确保组件状态的隔离和正确初始化。

摘要由CSDN通过智能技术生成

Vue 脚手架学习记录

通过vue-cli 4.0.5 脚手架创建好Vue工程后，在IDEA打开项目。下载好插件后，
就可以像vs code开发vue项目了。出现的第一错误
[Vue warn]: The “data” option should be a function that returns a per-instance value
in component definitions.
出现错误的原因：

<template>
    <div>{{message}}</div>
</template>

<script>
    export default {
        name: "demo",
        data:{
                message: "hello world"

        }
    }
</script>

修改这个错误：
为将data写成函数的形式,因为是在一个子组件写的所以写出如下函数的形式：

	<template>
    <div>{{message}}</div>
</template>

<script>
    export default {
        name: "demo",
        data:function () {
            return {
                message: "hello world"
            }
        }
    }
</script>