一、Vue中slot的使用
父组件
<template>
<div class="home" @click="goPage()">首页
<test>
<template slot="bottom" slot-scope="data">
bottombottombottombottom==「」「」{{data.bottom}}
</template>
<template slot-scope="data" slot="top">
top topop topop topop topop topop top
</template>
</test>
</div>
</template>
子组件
<template>
<div>
<slot name="bottom" :bottom="bottom">默认值</slot>
<div style="width:200px;height: 200px; background-color: blueviolet;">
我是子组件的值
</div>
<slot name="top">默认值</slot>
</div>
</template>
使用场景
1.通过插槽可以让用户可以拓展组件,去更好地复用组件和对其做定制化处理
2.如果父组件在使用到一个复用组件的时候,获取这个组件在不同的地方有少量的更改,如果去重写组件是一件不明智的事情
3.通过slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用比如布局组件、表格列、下拉选、弹框显示内容等
slot
可以分来以下三种:
-
默认插槽(就是父组件没值的时候可以在子组件设置插槽的默认值)
-
具名插槽(子组件用
name
属性来表示插槽的名字,父组件中在使用时在默认插槽的基础上加上slot
属性,值为子组件插槽name
属性值) -
作用域插槽(作用域插槽是子组件可以在slot标签上绑定属性值,在父组件可以拿到子组件的数据,通过子组件绑定数据传递给父组件。(插槽的作用域为子组件))
使用过element就可以发现slot的应用
二、Vue 中mixin 的理解
1.组件内使用mixin
//mixin.js文件
export default {
data(){
return {
name: 'mixin'
}
},
created: function(){
this.hellomixin()
},
methods: {
hellomixin(){
console.log('hello mixin!');
}
}
}
<script>
import mixin from '@/views/common/mixin'
export default {
mixins: [mixin]
}
</script>
2.main全局混入
Vue.mixin({
data() {
return {
msg: 'hello'
}
},
methods: {
mixinMethod() {
console.log(this.msg+',mixin混入')
}
}
})
mixin的知识点
1.多个组件可以共享数据和方法,在使用mixin的组件中引入后,mixin中的方法和属性也就并入到该组件中,可以直接使用。钩子函数会两个都被调用,mixin中的钩子首先执行。
2.混合为同一个对象数据时候,两个对象键名冲突时,取组件对象的键值
3.混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。