2017-05-24 8 views
0

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> 
+1

アプリケーションコンポーネントとmain.js' 'で定義された親コンポーネントは、同じ名前を持つことができ、独自のデータのプロパティ値を持つ2つの別々のVueのインスタンスです。あなたは、アプリケーションの 'message'データプロパティを上書きすることで何を達成しようとしていますか? – thanksd

+0

私は他の値/メソッドをmain.jsで必要に応じて与えることができるデフォルトのコンポーネントを作ろうとしています – Kevin

+0

私はvue mixinsを見ていたでしょう – thanksd

答えて

0

[OK]を作っていますあなたは何をしているのか混乱してしまいました。 App.vueコンポーネントとmain.js vueインスタンスにはそれぞれ、dataプロパティのOWNインスタンスがあります。 main.jsがコンポーネントにデータを渡すことができるようにするには、これを行うために小道具を公開する必要があります。app.vueコンポーネントがmain.js vueインスタンスと通信できるようにするには、イベントを発生させ、main.jsはそのイベントをリスンする必要があります。あなたがvuejsのドキュメントで1日か2日過ごすことを強くお勧めします。その正直なところ、私が今までに読んだことがある最高のソフトウェアドキュメントのいくつか、あなたの問題はチュートリアルのかなり早い段階で取り上げられています。

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

+0

ありがとう!私はドキュメントでもう一日過ごすつもりです。 – Kevin

関連する問題