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 子元件 父元件 兄弟元件互傳 父...