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>