详解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 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
AngularJS自动表单验证
Feb 01 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
php自动加载代码实例详解
2021/02/26 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
javascript实现日历效果
2019/06/17 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
python音频处理的示例详解
2020/12/23 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
班级道德讲堂实施方案
2014/02/24 职场文书
工地安全标语
2014/06/07 职场文书
课内比教学心得体会
2014/09/09 职场文书
陕西导游词
2015/02/04 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL