vue元件間通訊

2021-08-21 22:38:26 字數 1546 閱讀 4683

1、父元件向子元件傳遞資料,只需要props就行。

設定資料並繫結到元件上。子元件用props接收,就能在元件內部使用獲取到的資料 。

反向通訊則需要在父級元件上自定義對應的方法,子元件使用$emit呼叫父元件方法,並上傳資料

content

date

content.vue

}

}

date.vue

}

}

上面這個例子,我們在父元件定義了tochild,並繫結在senddata傳遞給子元件,子元件用props進行接收並顯示。

子元件使用emit,去呼叫父元件的showtitle方法,並傳遞了包含子元件資料的物件。父元件接收資料改變文件title。

2、子元件通訊的話,最早的方法是通過父級來實現通訊,現在可以通過vuex的store功能來實現。

安裝vuex

cnpm install vuex
src目錄下新建store.js

import vue from 'vue'

import vuex from 'vuex'

vue.use(vuex);

const store = new vuex.store(,

mutations:

}})export default store

state下新建儲存需要資料的字段,mutations建立demo需要的方法

main.js裡引用store並注入vue

import vue from 'vue';

import router from './route';

import store from './store';

new vue(

})

子元件裡就可以用this.$store.state獲取封裝的資料,使用this.$store.commit('send')呼叫store.js裡的方法,或者this.$store.commit('send','文案')帶上引數

我們在content.vue裡加入

this.$store.commit('send','這裡是content')
就可以在date.vue裡獲取到資料

}
題外話,之前看到的關於input v-model的內容

上面兩段**是結果是一樣的,所以如果我們要自定義元件實現input的雙向資料繫結,得使用

vue.component('inputac',)

如果type="checkbox"得使用

vue.component('inputcheck',,

template:''

})

vue元件間通訊

參考文章 vue父子元件間通訊可以用prop完成,跨級通訊則要用attrs來實現。1.attrs實現跨級通訊 父親元件 father元件 p msg1 p msg1 msg1 msg2 msg2 msg3 msg3 msg4 msg4 title 乙個標題 son1 div template imp...

vue元件間通訊

a元件要傳遞資料給b元件 a元件是有資料的,b元件是需要資料的 vue的各個元件data是不共享的,但是我們有時需要傳遞資料,那麼就可以使用vuex的store,store是乙個物件,裡面有個state,用來儲存多個元件需要使用的資料 我們先定義資料 在store的state中,定義資料 然後 在s...

vue元件間通訊

相關鏈結 元件通訊 學習鏈結vue.js 60分鐘快速入門 父元件傳子元件 父傳子方法 一 屬性傳遞 props 子元件 父元件 父傳子方法 二 廣播事件傳遞 vm.broadcast 子元件 父元件 子元件傳父元件 子傳父方法 派遣事件傳遞 vm.dispatch 子元件 父元件 兄弟元件互傳 父...