slot插槽-编程思维

<slot></slot>  写在template模板中

在组件的模板中使用了slot标签后,该组件在使用时可以在组件标签内填写内容,他会自动代替插槽的位置

1.插槽的基本使用<slot></slot>
2,插槽的默认值<slot>button< /slot>
3.如果有多个值,同时放入到组件进行替换菜,一起作为替换元素->

如果你在组件的模板中 <slot><button></button></solt>  在slot标签内写了内容,那么在你使用组件时,若组件内没有写内容,他会默认有一个button,但如果你标签内写了内容,那么button就没有了,取而代之的是你写的内容。 这么多文字形容不如看一个栗子: 代码截图

 

 运行效果:

 具名插槽的使用   (便于一个组件复用时能满足不同需求)

所谓具名插槽:就是在组件模板中添加插槽的时候,给插槽一个name。 
<slot name=“插槽名(可以是中文)”>< /slot>
然后在使用组件时,想把内容添加到指定的插槽需要这样做  
假设<cpn> 是一个组件  他的模板内容是 <template> <slot name=“猫猫”><i>哈哈哈</i>< /slot> </template>
<cpn> <span slot="猫猫">我是name为‘猫猫’的插槽内容</span> </cpn>
代码截图:

 

作用域插槽的使用: (若还不了解作用域的,请移步编译作用域的随笔:https://www.cnblogs.com/maomao777/p/15823950.html)

他的作用其实就是为了能让父组件能够拿到子组件的data,并按照自己想要的方式进行排列展示。
举个栗子:案例

 

 关键属性:slot-scope


 

<div id="app">
  <cpn></cpn>

  <cpn>
    <!--目的是获取子组件中的pLanguages 这里使用template是因为vue2.5x以下不支持其他标签,为了能有更强的适应性-->
    <template slot-scope="slot">
    <!-- slot-scope 后面的名字是自定义的 ,下面在获取的值是 slot.你插槽所绑定的属性的名字 -->
<!--<span v-for="item in slot.data"> - {{item}}</span>--> <span>{{slot.data.join(' - ')}}</span> </template> </cpn> <cpn> <template slot-scope="slot"> <!--<span v-for="item in slot.data">{{item}} * </span>--> <span>{{slot.data.join(' * ')}}</span> </template> </cpn> <!--<cpn></cpn>--> </div> <template id="cpn"> <div>
  // 这里的data是自定义的,就是绑定一个属性 值 <slot :data="pLanguages"> <ul> <li v-for="item in pLanguages">{{item}}</li> </ul> </slot> </div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' }, components: { cpn: { template: '#cpn', data() { return { pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift'] } } } } }) </script>

 

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/maomao777/p/15821875.html

从0到1手把手实现vite-编程思维

什么是Vite? 法语:轻量化,快速 基于VUE3 非 打包开发服务器,请注意,它是个开发服务器哇!! 快速开发,按需编译,不再等待整个应用编译完成 基于原生模块系统ESModule实现 说白了,就是一个node.js服务器,帮你运行起来代码,让你可以调试 它和我们部署的webserver不同的是,里面内置了webs

从0到1手把手教你实现vite系列--重写依赖请求路径,处理/@modules/vue引用-编程思维

前面以及写了三篇了,这是第四篇,等我写完就合并起来哦 这个是第一篇的链接:vite原理,创建项目,基础知识 这个是第二篇的链接Vite-中篇-通过服务访问静态资源以及重写请求路径 这个是第三篇的链接# 从0到1手把手教你实现vite-读取js文件解析所有的import语法,处理字符串并改写文件路径 重写依赖请求路径,

vue的父与子组件的访问-编程思维

父访问子  (需要掌握) this.$children 和 this.$refs   this.$children 返回的是一个数组,包含父组件的所有子组件  this,$refs 返回的是一个对象,默认为空,返回父组件中所有标签带有ref属性的子组件 this.$children 是获取父组件的所有子组件,然后返回一

vue组件-编程思维

  组件使用的基本步骤创建组件构造器  Vue.extend()方法      //在vue2.x版本后基本已经很少见了 用了新的语法糖代替注册组件    Vue.component()方法使用组件    在Vue的作用范围内使用组件   组件若标签内不需要传其他值的时候 可以使用单标签,可以使代码看起来更加简便 

vue组件:canvas实现图片涂鸦功能_sfornt-编程思维

方案背景 需求 需要对图片进行标注,导出图片。 需要标注N多图片最后同时保存。 需要根据多边形区域数据(区域、颜色、名称)标注。 对应方案 用canvas实现涂鸦、圆形、矩形的绘制,最终生成图片base64编码用于上传 大量图片批量上传很耗时间,为了提高用户体验,改为只实现圆形、矩形绘制,最终保存成坐标,下次显示

vue的父与子组件的访问-编程思维

父访问子  (需要掌握) this.$children 和 this.$refs   this.$children 返回的是一个数组,包含父组件的所有子组件  this,$refs 返回的是一个对象,默认为空,返回父组件中所有标签带有ref属性的子组件 this.$children 是获取父组件的所有子组件,然后返回一

vue组件-编程思维

  组件使用的基本步骤创建组件构造器  Vue.extend()方法      //在vue2.x版本后基本已经很少见了 用了新的语法糖代替注册组件    Vue.component()方法使用组件    在Vue的作用范围内使用组件   组件若标签内不需要传其他值的时候 可以使用单标签,可以使代码看起来更加简便