將數據從一個組件傳遞到所有使用$ emit而不使用@click的VueJS

嘗試學習vuejs我遇到了如何使用$ emit但不使用任何@click將任何數據從一個組件傳遞到所有組件的問題。有可能一些數據只是可用，並隨時抓住它，而不使用點擊？

假設我們有正常的@click和$ emit這個例子。

main.js

export const eventBus = new Vue()

Hello.vue

<template> 
    <div> 
    <h2>This is Hello component</h2> 
    <button 
     @click="emitGlobalClickEvent()">Click me</button> 
    </div> 
</template> 
<script> 
import { eventBus } from '../main' 
export default { 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    } 
    }, 
    methods: { 
    emitGlobalClickEvent() { 
     eventBus.$emit('messageSelected', this.msg) 
    } 
    } 
} 
</script>

User.vue

<template> 
    <div> 
    <h2>This is User component</h2> 
    <user-one></user-one> 
    </div> 
</template> 
<script> 
    import { eventBus } from '../main' 
    import UserOne from './UserOne.vue' 
    export default { 
    created() { 
     eventBus.$on('messageSelected', msg => { 
     console.log(msg) 
     }) 
    }, 
    components: { 
     UserOne 
    } 
    } 
</script>

UserOne.vue

<template> 
    <div> 
     <h3>We are in UserOne component</h3> 
    </div> 
</template> 
<script> 
    import { eventBus } from '../main' 
    export default { 
    created() { 
     eventBus.$on('messageSelected', msg => { 
     console.log('From UserOne message !!!') 
     }) 
    } 
    } 
</script>

我想得到這樣的消息：如果可能，歡迎使用Hello.vue中的Vue.js應用程序在所有組件中使用，但不使用@click。

來源

2017-08-01 John Smith

通過[道具]（https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props）向兒童提供數據的常用方法 –

只需使用Vuex。用數據創建vuex存儲，將其注入vue實例和所有組件中，您可以像這樣讀取這些數據。$ store - 不再需要道具。 – WaldemarIce

您可以創建另一個JavaScript文件，其中包含您的初始狀態的對象。類似於您在組件中定義數據的方式。

在此文件中，您將導出對象並將其導入需要訪問此共享狀態的所有組件。沿此線的東西：

import Store from 'store'; 

data() { 
    return { 
    store 
    } 
}

這可能幫助：

https://vuejs.org/v2/guide/state-management.html

在這一點上，如果你的應用程序的複雜性更加成長，你也可能開始檢查出Vuex這有助於跟蹤您店內的變化（突變）。

給出的例子是必不可少的一個非常簡單的Vuex版本。

來源

2017-08-01 10:11:12

將數據從一個組件傳遞到所有使用$ emit而不使用@click的VueJS

回答

相關問題