Vue筆記(十一) 組件間通信

props

使用組件標籤時
<my-component name='tom' :age='3' :set-name='setName'></my-component>

定義
MyComponent 時

1) 在組件內聲明所有的 props
2) 方式一: 只指定名稱 props: ['name', 'age', 'setName']
3) 方式二: 指定名稱和類型
props: {
    name: String,
    age: Number,
    setNmae: Function
}

4) 方式三:
指定名稱/類型/必要性/默認值
props: {
    name:
        {type: String,
        required: true,
        default:xxx},
}

注意
1) 此方式用於父組件向子組件傳遞數據
2) 所有標籤屬性都會成爲組件對象的屬性, 模板頁面可以直接引用
3) 缺點: a. 如果需要向非子後代傳遞數據必須多層逐層傳遞
b. 兄弟組件間也不能直接 props 通信, 必須藉助父組件纔可以

 

vue 自定義事件

綁定事件監聽
@delete_todo="deleteTodo"
//通過$on()
this.$refs.xxx.$on('delete_todo', function (todo) {
 this.deleteTodo(todo)
})

// 觸發事件(只能在父組件中接收)
this.$emit(eventName, data)

注意:
1) 此方式只用於子組件向父組件發送消息(數據)
2) 問題: 隔代組件或兄弟組件間通信此種方式不合適

消息訂閱與發佈(PubSubJS 庫)

訂閱消息
PubSub.subscribe('msg', function(msg, data){})

發佈消息
PubSub.publish('msg', data)

優點: 此方式可實現任意關係組件間通信(數據)

 

slot

此方式用於父組件向子組件傳遞`標籤數據`

子組件: Child.vue
<template>
 <div>
 <slot name="xxx">不確定的標籤結構 1</slot>
 <div>組件確定的標籤結構</div>
 <slot name="yyy">不確定的標籤結構 2</slot>
 </div>
</template>

父組件
<child>
    <div slot="xxx">xxx 對應的標籤結構</div>
    <div slot="yyy">yyyy 對應的標籤結構</div>
</child>