2020年5月27日 星期三
Always protect yourself.
今天呢早上呢也也是和往常一样进了背诵面试题，然后老大和主任呢给我们开了一个班会，总结了上一周的情况，然后老大说了一下接下来一个月的任务安排然，后呢有接着Vue的组件通讯讲了两个新的知识点，就是Vue 新增的?attrs与?listeners.，mixin全局混入，还有就是要提高一下这个造轮子能力，使用Vue呢自己封装几个组件
$attrs
作用：
主要用于跨组件传输props，中间组件使用v-bind = "$attrs"转发，
$listeners:
和$attrs类似，主要是从根组件向下传递事件，可以跨组件传递
mixin全局混入
全局注册一个混入，影响注册之后所有创建的每个 Vue
实例。插件可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。
全局mixin就是给全部Vue文件添加一些公用的实例。
步骤：
第一步：创建一个mixin文件（js文件）
const mixins = {
data() {
return {
w:'word'
}
},
methods: {
// 确定
confirm () {
// this.app.getData(666);
// 子级派发confirm事件
this.$emit('confirm', { name: this.name, price: this.price })
},
// 取消
cancel () {
this.$emit('cancel')
}
}
}
export default mixins;
第二步：引入到组件中并且通过mixins注入
import mixins from '../utils/mixin
export default {
name: 'maskDialog',
mixins: [mixins],
props: {},
methods:{}
}
怎么进行组件的封装
1.props：父传子
2.事件(派发和监听)
this.$emit()派发事件
通过@或$on来监听事件
3.slot（插槽），内容分发
命名插槽
<slot name="命名插槽名"></slot>
例如：<slot name="qrcode"></slot>
使用：
<div slot="qrcode">
.....
</div>
封装组件思考：
1.你想向用户暴露哪些属性 (props)
2.你想向用户暴露哪些事件，让用户监听来处理后续的业务 ($emit,@)
3.你想让用户嵌入哪些自定义的内容（slot）
