鍍金池/ 問(wèn)答/HTML/ Vue子組件和父組件的交互方式有哪些?

Vue子組件和父組件的交互方式有哪些?

Vue子組件和父組件的交互方式有哪些?

案例:


<template>

    <!-- Details是子組件-->
    <Details  :data="List" />

</template>
<script>
    import Details from "./_details";
    export default {
        components: {
            Details
        },
        data() {
            return {
                List:[1,2,3,4,5]
            }
        }
    }
</script>

1.父組件傳值給子組件,可以通過(guò)props。
子組件通過(guò)props進(jìn)行接收。
2.父組件可以通過(guò)$refs獲得子組件,從而得到子組件的一些數(shù)據(jù)。
3.子組件調(diào)用父組件(emit、on配合使用)可以實(shí)現(xiàn)事件的傳遞。

請(qǐng)問(wèn)除了這幾種方式,還有沒(méi)有其他的方式來(lái)實(shí)現(xiàn)父組件和子組件之間數(shù)據(jù)的傳遞,事件的傳遞呢?還有沒(méi)有更加便捷的方式?

回答
編輯回答
萢萢糖

vue.js 組件之間傳遞數(shù)據(jù)
有興趣可以看看,有詳細(xì)寫(xiě)出各種組件傳遞數(shù)據(jù)的具體用法。

2017年7月23日 20:10
編輯回答
挽歌

t通過(guò)eventBus

<<script>
import Vue from 'vue'
const bus = new Vue()
export default bus
</script>

和父子組件調(diào)用on,emit類(lèi)似,還可以sessionStorage,local Storage

2017年1月6日 01:59
編輯回答
呆萌傻

官網(wǎng)上面有:使用vuex ;在vuex的官方文檔也給了一個(gè)簡(jiǎn)化版本的BUS實(shí)例;可以跨若干組件傳參

2017年9月22日 05:39
編輯回答
浪蕩不羈

那就多了去了,不過(guò)常見(jiàn)常用的也就props/emit/callback/$refs、另外類(lèi)似redux的vux。

其他不常用的還有:
本地存儲(chǔ)、配合服務(wù)端的話websocket也可以、xhr長(zhǎng)時(shí)間連接等等

ps:props down, events up。

2018年4月24日 03:31