没有合适的资源?快使用搜索试试~ 我知道了~
笔记01_vue组件化实践1
需积分: 0 0 下载量 147 浏览量
2022-08-03
11:54:26
上传
评论
收藏 551KB PDF 举报
温馨提示
试读
14页
1. 深入理解Vue的组件化机制 2. 掌握Vue组件化常用技术 3. 能够设计并实现多种类型的组件 4. 加深对一些vue原理的理解 1. 组件通信 2. 组
资源详情
资源评论
资源推荐
特性$attrs
引用refs
子元素$children
子元素不保证顺序
子组件 => 父组件:自定义事件
兄弟组件:通过共同祖辈组件
通过共同的祖辈组件搭桥,$parent或$root。
祖先和后代之间
// child
props: { msg: String }
// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>
// child:并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>
// parent
<HelloWorld ref="hw"/>
mounted() {
this.$refs.hw.xx = 'xxx'
}
// parent
this.$children[0].xx = 'xxx'
// child
this.$emit('add', good)
// parent
<Cart @add="cartAdd($event)"></Cart>
// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')
开课吧web全栈架构师
由于嵌套层数过多,传递props不切实际,vue提供了 provide/inject API完成该任务
provide/inject:能够实现祖先给后代传值
任意两个组件之间:事件总线 或 vuex
事件总线:创建一个Bus类负责事件派发、监听和回调管理
实践中可以用Vue代替Bus,因为它已经实现了相应功能
vuex:创建唯一的全局数据管理者store,通过它管理数据并通知组件状态变更
范例:组件通信
组件通信范例代码请参考components/communicate
插槽
插槽语法是Vue 实现的内容分发 API,用于复合组件开发。该技术在通用组件库开发中有大量应用。
// ancestor
provide() {
return {foo: 'foo'}
}
// descendant
inject: ['foo']
// Bus:事件派发、监听和回调管理
class Bus{
constructor(){
this.callbacks = {}
}
$on(name, fn){
this.callbacks[name] = this.callbacks[name] || []
this.callbacks[name].push(fn)
}
$emit(name, args){
if(this.callbacks[name]){
this.callbacks[name].forEach(cb => cb(args))
}
}
}
// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('foo', handle)
// child2
this.$bus.$emit('foo')
开课吧web全栈架构师
剩余13页未读,继续阅读
chenbtravel
- 粉丝: 16
- 资源: 296
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0