1、父子傳參
?父組件向子組件傳值
父向子
父組件上邊,在要接受數(shù)據(jù)的組件上通過動態(tài)屬性傳遞
如
:data="data"
子組件通過props屬性接受
1.數(shù)組
? ? props:['title','count','imgs','styles'],
2.對象
? ? 屬性名類型 Object | Array | String | Numeber | Boolean | Function
? ? props:{
? ? ? ? title:Array,
? ? }
? ? props:{
? ? ? ? 屬性名:{
? ? ? ? ? ? type:類型,
? ? ? ? ? ? required:必填項,默認(rèn)值為false,
? ? ? ? ? ? defalult:默認(rèn)值,(如果是簡單值的話,直接設(shè)置,如果是數(shù)組或者對象的話,需要一個函數(shù)),
? ? ? ? ? ? validator(val){
? ? ? ? ? ? 自定義格式的驗證,函數(shù)return 成立
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? vue 是單向數(shù)據(jù)流,不能在子組件里面直接修改父組件傳遞過來的值
? ?子向父
? ? ? ? 子組件里邊使用$emit
? ? $emit('事件名稱','實參1','實參2')
? ? <button @click="$emit('addCount',count)"></button>
? ? @事件名稱 = "事件處理程序"
? ? 父組件接受的方法
? ? ? ? @addCount = "方法名"
? ? ? ? 在methods方法里面寫函數(shù)
? ? ? ? addCount(){
? ? ? ? ? ? console.log(1);
? ? ? ? }
? ? ? 非父子
? ? ? ? ? ? 3通過創(chuàng)建一個空對象
? ? ? ? ? ? 在 main.js 里面Vue.prototype.$bus=new Vue();
? ? ? ? ? ? 所有的組件都是通過vueComponent 實例出來的 vueComponent繼承vue
? ? ? ? ? ? 子組件
? ? ? ? ? ? ? 傳參的方式:? this.$bus.$emit('add',item)
? ? ? ? ? ? ? ? 在created方法里面接受
? ? ? ? ? ? ? ? this.$bus.$on('add',(obj)=>{
? ? ? ? ? ? ? ? ? ? console.log(obj)//傳過來的參數(shù)值
? ? ? ? ? ? ? ? })