渲染 Vue.js 的 main.js 时出现问题

Question

我是 Vue 的新手，我需要维护一个项目.. 问题是这样的：我在 main.js 中有路由方案..

main.js

import Vue from 'vue'

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

页面/page.vue

<span>{{ message }}</span>

事实证明，我正在尝试在文件夹地址“../pages/page.vue”中的外部模板中显示日期上的“消息”。 但是当我输入 {{message}} 时，我收到以下错误：

[Vue 警告]：属性或方法“消息”未在实例上定义，但在渲染期间被引用。 确保在 data 选项中声明反应数据属性。

谢谢！

Answer 1

您已经创建了一个可以跨项目组件使用的Vue 实例。

文档解释得很好：

一个 Vue 应用程序由一个用新 Vue 创建的根 Vue 实例组成，可以选择组织成一个嵌套的、可重用的组件树。

您遇到的问题是您试图直接从main.js访问数据值到外部组件（ page.vue ）。 您应该通过属性从 main.js 传递数据。

您可能想查看一个工作示例，我在沙箱上添加了行注释来指导您。

请看一下