1. 父传子
(1) props
父组件内声明所有的 props
[1] 方式一: 只指定名称
props: [‘name’, ‘age’, ‘setName’]
[2] 方式二: 指定名称和类型
props: {
name: String,
age: Number,
setNmae: Function
}
[3] 指定名称/类型/必要性/默认值
props: {
name: {type: String, required: true, default:xxx},
}
子组件：
(2) Slot 标签传值
此方式用于父组件向子组件传递标签数据
子组件使用插槽在行内接收name标签值
父组件在行内设置slot值，对应子组件的name值
2. 子传父：$emit
子元素绑定事件监听
[1] 通过 v-on 绑定
@delete_todo=“deleteTodo”
[2] 通过
o
n
(
)
t
h
i
s
.
on() this.
on()this.refs.xxx.
o
n
(
′
d
e
l
e
t
e
t
o
d
o
′
,
f
u
n
c
t
i
o
n
(
t
o
d
o
)
t
h
i
s
.
d
e
l
e
t
e
T
o
d
o
(
t
o
d
o
)
)
父
元
素
触
发
事
件
t
h
i
s
.
on('delete_todo', function (todo) { this.deleteTodo(todo) }) 父元素触发事件 this.
on(′deletetodo′,function(todo)this.deleteTodo(todo))父元素触发事件this.emit(eventName, data)
3. 任意组件的通信
(1) 兄弟组件通信可以借助父元素 使用props通信
(2)
[1] 接受组件绑定事件监听 (订阅消息)
PubSub.subscribe(‘msg’, function(msg, data){})
目标: 标签元素
事件名(类型): click/focus
回调函数: function(event){}
[2] 发送组件触发事件 (发布消息)
PubSub.publish(‘msg’, data)
DOM 事件: 用户在浏览器上对应的界面上做对应的操作
自定义: 编码手动触发
1846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
