Vue筆記 十一 元件間通訊

2021-10-06 11:14:16 字數 967 閱讀 5394

使用元件標籤時

定義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...