试图更改数据vue.js

我想覆盖App.vue组件中的数据。但每次它都会从组件中获取默认数据，如果我尝试在我的main.js中覆盖它。我也利用的WebPack的试图更改数据vue.js

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>

来源

2017-05-24 Kevin

该应用组件和'main.js'定义的父组件是具有其自己的数据属性值的两个单独的Vue实例可具有相同的名称。你想通过覆盖App的'message'数据属性来完成什么？ – thanksd

我想做一个默认组件，至于我可以在main.js中给其他值/方法，如果有必要 – Kevin

我想看看vue mixins – thanksd

好吧，我想你对自己在做什么感到困惑。你的App.vue组件和你的main.js vue实例都有它们的数据属性的OWN实例。如果你想让你的main.js能够将数据传递到你的组件中，你需要公开一个prop来做这件事。如果你想让你的app.vue组件能够与你的main.js vue实例进行通信，那么你必须提出一个事件，main.js必须倾听该事件。我强烈建议你花一两天时间阅读vuejs文档。它的老实说，我遇到过一些最好的软件文档，你的问题很早就在教程中解决了。

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

来源

2017-05-24 21:00:14 victor

谢谢！我会花更多的时间在文档上。 – Kevin

试图更改数据vue.js

回答

相关问题