使用元件標籤時
定義mycomponent 時
1) 在元件內宣告所有的 props
2) 方式一: 只指定名稱 props: ['name', 'age', 'setname']
3) 方式二: 指定名稱和型別
props:
4) 方式三:
指定名稱/型別/必要性/預設值
props: ,
}
注意
1) 此方式用於父元件向子元件傳遞資料
2) 所有標籤屬性都會成為元件物件的屬性, 模板頁面可以直接引用
3) 缺點: a. 如果需要向非子後代傳遞資料必須多層逐層傳遞
b. 兄弟元件間也不能直接 props 通訊, 必須借助父元件才可以
繫結事件監聽
@delete_todo="deletetodo"
//通過$on()
this.$refs.***.$on('delete_todo', function (todo) )
// 觸發事件(只能在父元件中接收)
this.$emit(eventname, data)
注意:1) 此方式只用於子元件向父元件傳送訊息(資料)
2) 問題: 隔代元件或兄弟元件間通訊此種方式不合適
訂閱訊息
pubsub.subscribe('msg', function(msg, data){})
發布訊息
pubsub.publish('msg', data)
優點: 此方式可實現任意關係元件間通訊(資料)
此方式用於父元件向子元件傳遞`標籤資料`
子元件: child.vue
不確定的標籤結構 1
元件確定的標籤結構
不確定的標籤結構 2
父元件*** 對應的標籤結構
yyyy 對應的標籤結構
vue元件間通訊
1 父元件向子元件傳遞資料,只需要props就行。設定資料並繫結到元件上。子元件用props接收,就能在元件內部使用獲取到的資料 反向通訊則需要在父級元件上自定義對應的方法,子元件使用 emit呼叫父元件方法,並上傳資料 content date content.vue date.vue 上面這個例...
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...