尝试更改数据 vue.js答案

【问题标题】：Trying to change data vue.js尝试更改数据 vue.js
【发布时间】：2017-10-25 09:08:39
【问题描述】：

我正在尝试覆盖 App.vue 组件中的数据。但是每次如果我尝试在我的 main.js 中覆盖它，它就会从组件中获取默认数据。我也在使用 webpack

App.vue

<template>
    <div class="message">{{ message }}</div>
</template>

<script>
//import TopBar from './top-bar.vue'
export default {
    name: 'App',
    data () {
        return {
            message: 'hello world'
        }
    }
}
</script>

main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App: App },
    data: {
      message: 'New text'
    }
})

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/build.js"></script>
  </body>
</html>

【问题讨论】：

main.js 中定义的 App 组件和父组件是两个独立的 Vue 实例，它们具有自己的数据属性值，可以同名。你想通过覆盖 App 的 message 数据属性来完成什么？
我正在尝试制作一个默认组件，如果需要，我可以在 main.js 中提供其他值/方法
我会研究 vue mixins

标签： javascript jquery webpack vue.js

【解决方案1】：

好吧，我想你对什么在做什么感到困惑。你的 App.vue 组件和你的 main.js vue 实例每个都有自己的 data 属性实例。如果您希望您的 main.js 能够将数据传递到您的组件中，您需要公开一个道具来执行此操作。如果您希望您的 app.vue 组件能够与您的 main.js vue 实例通信，那么您必须引发一个事件并且 main.js 必须正在监听该事件。我强烈建议您花一两天时间阅读 vuejs 文档。老实说，它是我遇到过的一些最好的软件文档，您的问题在本教程的早期就得到了解决。

https://vuejs.org/v2/guide/

【讨论】：