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

【问题标题】：Problems rendering main.js of Vue.js渲染 Vue.js 的 main.js 时出现问题
【发布时间】：2018-05-17 15:24:46
【问题描述】：

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

main.js

import Vue from 'vue'

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

pages/page.vue

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

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

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

谢谢！

【问题讨论】：

【解决方案1】：

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

Docs解释得很好：

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

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

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

请看一下

【讨论】：