1. 为什么一个 new Vue 可以构造出一个 eventBus
// 当我们定义了new Vue之后,可以这样用
var app = new Vue({
created(){
this.$emit()
this.$on()
}
})
// 也可以这样用
app.$emit()
app.$on()
app.$off()
// 那么归根结底，只要满足能触发一个事件，监听一个事件，和取消监听一个事件，那么它就是一个事件中心
eventBus
eventBus.$emit() // 触发一个事件
eventBus.$on() // 监听一个事件
eventBus.$off() // 取消监听一个事件
// 而我们的app 正好全部满足，而app就是 new Vue，new Vue就有这三个接口，所以new Vue就是一个eventHub。
// 因为它正好有这个三个接口，它的行为完全一样，这就叫基于行为的开发
2. 开始写 CSS 样式
$tab-height: 40px;
.tabs-head {
display: flex;
height: $tab-height;
justify-content: flex-start;
align-items: center;
border: 1px solid red;
> .actions-wrapper {
margin-left: auto; // 这样写可以让按钮靠右,不要问为什么就是可以
}
}
.tabs-item {
flex-shrink: 0;
padding: 0 2em; // 用em是因为只关心两个栏之间的间距
}
3.激活属性 active 应该放在 data，还是放在 props
- 如果需要用户传值，就放到 props 里面，因为 props 是你的输入参数，
- data 不需要用户传值，自身维护值
// 抽象的讲，就像写一个函数,prop是外部传递的参数，data相当于局部变量，组件就是一个函数
function fn(prop1,prop2){
var data1
var data2
}
// 我们在设计api的时候，没有需要用户传递data，我们是让用户把name传进来，实际上是tabs传递来的
// tabs传也是传，硬要用props也可以
4.在 mounted 里测试开送事件，不能用 created，因为需要确认元素已经挂载好了
// app.js的new Vue
data: {
selectedTab: 'sports'
}
// index.html
美女
// tabs.vue发布
mounted(){
this.eventBus.$emit('update:selected', this.selected) // 这样写不可以触发外面
}
// tabs-item监听
created(){
this.eventBus.$on('update:selected',(name)=>{
if(name === this.name){
console.log(`我${this.name}被选中了`)
}else{
console.log(`我${this.name}没被选中了`)
}
})
},
// tabs-pane同理，选中了就把自己变成active
5. 加 class 写成计算属性
// tabs-item.vue
computed: {
classes() { // classes是一个计算属性
return {
active: this.active
}
}
},
created() {
this.eventBus.$on('update:selected', (name) => {
this.active = name === this.name;
})
},
// tabs-pane,同理,但是要多加一个v-if="active" 用于控制切换隐藏
6. 组件不能改自己的 props
// 相当于
function fn(obj){
obj.a = '1'
return obj
}
// 没多大问题，但是我们一般不要改参数传来的东西，vue也一样,如果硬要改
function fn(obj,n){
obj.a = '1'
n = 2
var number = n
number = 2
return obj
}
7. 框架主要的目的
// 使得团队的傻逼也写不出垃圾代码以保证代码的平均质量
function fn(obj){
obj.a = '1' // bad
return obj
}
function fn(obj,n){
obj.a = '1'
n = 2
var number = n // good
number = 2
return obj
}
