uniapp插件自定义

必须使用slot插槽

自定义组件里至少要有一个slot,否则不生效
只有一个slot的情况,slot必须在第一级view里否则不生效
想要复杂层级的插槽必须使用具名插槽

具名插槽

自定义组件里使用name=“插槽名”
调用的时候必须使用template v-slot:插槽名来调用

                <template v-slot:header>
                    <view>Here might be a page title</view>
                </template>
                <template v-slot:default>
                    <view>A paragraph for the main content.</view>
                    <view>And another one.</view>
                </template>
1
2
3
4
5
6
7

调用的时候也可以缩写为#插槽名

                <template #header>
                    <view>Here might be a page title</view>
                </template>
1
2
3

作用阈插槽

可以调用到子组件的数据
子组件里可以在插槽上定义变量,变量里的详细数据从js的data里得到
调用的时候先把v-slot:插槽名整个存成变量

                <template v-slot:default="slotProps">
                    {{ slotProps.user.firstName }}
                </template>
1
2
3

之后再调用组件里之前定义的变量就可以调用到了

解构插槽属性

可以把父组件数据传入到子组件
作用于插槽是吧插槽内容包裹在一个拥有单个参数的函数里
所以v-slot的值可以是任何能够作为函数定义中的参数的js表达式,在支持的环境下可以使用ES2015解构传入具体的插槽
是可以把自定义组件里的某些变量变成其他名字的
只有一个默认slot的组件可以使用

 <current-user v-slot="{ user }">
        {{ user.firstName }}
    </current-user>
1
2
3

这种简单的方式获取可以把模板变的简洁

解构插槽属性

作用域插槽实际上是插槽内容包裹到一个拥有单个参数的函数里
所以v-slot的值可以是js表达式
所以在支持的环境里,可以使用ES2015解构传入具体的插槽