如何將數據值從一個組件更改爲Vue Js中的另一個組件？

我是Vue Js的新人。所以，我面臨一個問題，即要從另一個組件中更改數據值。如何將數據值從一個組件更改爲Vue Js中的另一個組件？

我有一個組分A：

<template> 
    <div id="app"> 
     <p v-on:click="test()">Something</p> 
    </div> 
</template> 

import B from '../components/B.vue'; 
export default { 
    components: { 
     B 
    }, 
    methods: { 
     test: function() { 
      B.data().myData = 124 
      B.data().isActive = true 
      console.log(B.data().myData); 
      console.log(B.data().isActive); 
     } 
    } 
}

組分B：

export default { 
    data() { 
     return { 
      myData: 123, 
      isActive: false 

     } 
    } 

}

它仍然組分B的數據。但它不能影響組件B的數據。我想從組件A更改組件B的數據更改。我該怎麼做？

請詳細解釋一下。我看過vue js道具屬性，但我不明白。

來源

2017-10-05 Sukanta Bala

你能更新哪個是組件A和組件B嗎？ –

我更新了我的代碼。請看和回答我。 –

您正在尋找Vuex。

它是應用程序中所有數據的集中存儲區。

看看他們的文檔，它應該是非常簡單的。

來源

2017-10-05 11:30:46 mutantkeyboard

感謝您的評論。 –

您可以將道具傳遞給組件B.這些道具可以由父組件更新。你可以認爲B是一個愚蠢的組件，它只是呈現父級告訴它渲染的東西。例如：

// Component A 
<template> 
    <div id="app"> 
     <p v-on:click="test()">Something</p> 
     <b data="myData" isActive="myIsActive"></b> 
    </div> 
</template> 

<script> 
import B from '../components/B.vue'; 
export default { 
    components: { 
    B 
    }, 
    data() { 
    return { 
     myData: 0, 
     myIsActive: false, 
    }; 
    }, 
    methods: { 
    test: function() { 
     this.myData = 123 
     this.myIsActive = true 
    } 
    } 
} 
</script> 

// Component B 
<template> 
    <div>{{ data }}{{ isActive }}</div> 
</template> 

<script> 
export default { 
    props: { 
    data: Number, 
    isActive: Boolean 
}; 
</script>

來源

2017-10-05 12:52:54 truefalse10

謝謝你的回答。我試過這個不幸的失敗。我會再試一次。再次感謝。我會再次敲你。 –

有幾種方法？

如果您的組件有父子關係，你可以從父傳遞數據值到孩子。
如果你想回傳達給父母組件時，子組件已經改變了一些東西，你可以用vuejs事件發射器（自定義事件）發出一個事件時，數據值的變化和事件可以在另一個組件被聆聽，做你想要什麼。
如果你的組件沒有關係，那麼你必須使用別的東西而不是上面的東西。你可以使用兩種東西。一種是事件總線，另一種是狀態管理庫。對於vue，有一個叫做VueX的官方狀態管理庫。它非常易於使用。如果你想使用除vuex以外的其他東西，你可以使用它如REDX，MOBX等

本文檔包含了所有你想知道的內容。我不想放任何代碼，因爲doc很清楚。

VueX是最好的方法來做到這一點！非常容易使用..

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

來源

2017-10-06 06:55:54

非常感謝您......我會根據您的要求閱讀此文檔， –

如何將數據值從一個組件更改爲Vue Js中的另一個組件？

回答

相關問題