vue插槽solt ，uni.app

一、什么是插槽？

插槽就是子组件提供给父组件使用的一个占位符，用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码。

二、插槽的用法

1.创建一个子组件，在uni.app中创建一个components目录新建一个textConten.vue子组件，在子组件中放一个solt占位符。

2.在父组件中给这个子组件填充内容

效果图

假设在子组件中不加solt，在父组件中不会扩展子组件内容

子组件

<template name="textConten"><view><view >这是一个测试内容</view><!-- 这里可以插入内容 --><!-- <slot></slot> --></view>
</template>

父组件

   <textConten><view >我叫new world</view></textConten>

界面显示

3.有时候我们需要多个插槽，所以有了具名插槽的概念，通俗的说就是给插槽起名字。

在子组件中定义两个插槽

<template name="textConten"><view><view >这是一个测试内容</view><!-- 这里可以插入内容 --><view class="centerSlot" ><slot name="name1"></slot></view><view class="bottomSlot"><slot name="name2"></slot></view></view>
</template>

在父组件中引用插槽

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view><textConten><slot>这是没有不填加名字的</slot><text slot="name1">这是个内容11111</text><text slot="name2">这是第二个插槽</text></textConten><!-- <view :class="item.color?'bbb':''" v-for="(item,index) in list" @click="getItem(item)">{{item.name}}</view> --></view>
</template>

效果图：

4.作用域插槽

根据vue.js官网文档说是为了获取子组件才有的数据。虽然实际运用中还没碰到类似的情况，但是还模拟了一下。

在子组件data中定义一个数组list，然后给插槽通过v-model绑定一下。然后在父组件中把子组件绑定的名字作为attribute 绑定上去。

子组件代码

在父组件中

结果图

三、总结

1.在具名插槽中，如果父组件填充的内容没有指定子组件插槽的名称，那么，父组件扩展的内容将不会显示到界面上。

2.在具名插槽中，如果子组件没有默认插槽，而在父组件中指定插槽的名称，那么该内容也不会显示

vue插槽solt ，uni.app相关推荐

Vue插槽(solt)简单案例
当前页面向子组件传递的值带有HTML标签等特殊的字符时,传统的标签是无法解析的,这时候就需要用插槽(solt)功能来传递变量值 ItemOne.vue子组件中通过solt定义一个插槽 <temp ...
基于vue.js的uni app跨平台框架webapp、安卓app、苹果app、微信小程序毕业设计毕设作品开题报告论文参考（2）预约订座APP系统
效果图
vue插槽面试题_常见的vue面试题
001.v-show与v-if的区别 v-show:操作的是元素的display属性 v-if:操作的是元素的创建和插入相比较而言v-show的性能要高 002.methods.computed.w ...
vue插槽样式_vue 插槽简介及使用示例
Vue的插槽,是一种内容分发机制,但是我感觉它更加像组件的一种占位符的概念,通过插槽,等待组件外部传入复杂的内容. 使用插槽的好处在以前的例子中todo-item插槽直接写在了todo-list插槽 ...
vue插槽--slot
2019独角兽企业重金招聘Python工程师标准>>> vue插槽--slot,在很多三方的UI框架里大量的使用了插槽,像现在用的比较多的饿了么的ElementUI 在这里有自己写的 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...

vue插槽solt ，uni.app

vue插槽solt ，uni.app相关推荐

最新文章

热门文章