详解vue使用插槽分发内容slot的用法


Posted in Javascript onMarch 28, 2019

将父组件的内容放到子组件指定的位置叫做内容分发

//在父组件里使用子组件
<son-tmp>
	<div>我是文字,我需要放到son-tmp组件里面制定的位置</div>
</son-tmp>

单个插槽

父组件app.vue

<template>
 <div id="app">
  <test-slot>
   <span>我是父组件里的文字,但是我要被放到子组件里</span>
  </test-slot>
 </div> 
</template> 
 
<script>
import testSlot from './components/testSlot'
export default {
 data(){
  return {
   
  }
 },
 components:{
  testSlot
 }
}
</script>

<style>

</style>

子组件testSlot.vue

<template>
 <div>
  <h3>test-slot</h3>
  //父组件里的span会替换掉slot所以这里的123是看不见的
  //如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot会显示出来
  <slot>123</slot> 
 </div> 
</template> 
 
<script>
export default { 
 data(){
  return {
   
  }
 }
}
</script>

<style>

</style>

效果图:

详解vue使用插槽分发内容slot的用法

多个插槽也叫具名插槽

具名插槽就是将某个名字的内容插到子组件对应名字里面去

父组件app.vue

<template>
 <div id="app">
	//使用子组件testSlot
  <test-slot>
	 //slot=one这个div会替换掉子组件里name="one"的slot标签
   <div slot="one">
    <span>one</span>
    <span>第一个</span>
   </div> 
   //这个div没有用slot指定名字所以会替换掉子组件里没有name属性的slot标签
   <div>
    <span>此div没有slot</span>
   </div>
   //slot=two这个div会替换掉子组件里name="two"的slot标签
   <div slot="two">
    <span>two</span>
    <span>第二个</span>
   </div> 
  </test-slot>
 </div> 
</template> 
 
<script>
import testSlot from './components/testSlot'
export default {
 data(){
  return {
   
  }
 },
 components:{
  testSlot
 }
}
</script>

<style>

</style>

子组件testSlot.vue

<template>
 <div class="testSlot">
  <div class="noneSlot">
   <slot></slot> 
  </div>
  <div class="test-two">
   <slot name="two"></slot> 
  </div>
  <div class="test-one">
   <slot name="one"></slot> 
  </div>
 </div> 
</template> 
 
<script>
export default { 
 data(){
  return {
   
  }
 }
}
</script>

<style>

</style>

详解vue使用插槽分发内容slot的用法

作用域插槽(将子组件的值传到父组件供使用)

父组件app.vue

<template>
 <div id="app">
  <h2>app</h2>
   <test-slot :items="items">
    <template slot-scope="props">
     <span>{{ props.addr }}</span>
     <span>{{ props.cname }}</span>
     <span>{{ props.age }}</span>
    </template>
   </test-slot>
 </div>
</template>

<script>
import testSlot from './components/testSlot.vue'
export default {
 data (){
  return {
   items:[
    { text:'文字1' , cname:'tom' , addr:'usa' },
    { text:'文字2' , cname:'wangwu' , addr:'uk' },
    { text:'文字3' , cname:'zhangsan' , addr:'un' }
   ]
  }
 },
 methods:{
  
 },
 components:{
  testSlot
 }
}
</script>

<style>

</style>

子组件testSlot.vue

<template>
 <div class="hello">
  <slot :cname="items[2].cname"></slot> 
  <slot :addr="items[2].addr"></slot> 
  <slot age="18"></slot> 
 </div>
</template>

<script>
export default {

 data () {
  return {
   num:100
  } 
 },
 props:['items'],
 methods:{
  
 },
 created(){
  console.log('items',this.$props.items);
 }
}
</script>

<style scoped>

</style>

效果图:

详解vue使用插槽分发内容slot的用法

以上所述是小编给大家介绍的vue使用插槽分发内容slot的用法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
扩展String功能方法
Sep 22 Javascript
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
Vue简单实现原理详解
May 07 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
详解一个基于套接字实现长连接的express
Mar 28 #Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 #Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 #Javascript
深入理解es6块级作用域的使用
Mar 28 #Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 #Javascript
详解React服务端渲染从入门到精通
Mar 28 #Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 #Javascript
You might like
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
Linux的主要特性
2016/09/03 面试题
东方红海科技面试题软件测试方面
2012/02/08 面试题
电大自我鉴定
2013/10/27 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
资料员岗位职责范本
2015/04/13 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL