详解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 相关文章推荐
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 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
destoon二次开发入门示例
2014/06/20 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
vue组件化中slot的基本使用方法
2019/05/01 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python unittest实现api自动化测试
2018/04/04 Python
Python 编程速成(推荐)
2019/04/15 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
环保倡议书50字
2014/05/15 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
2014年档案室工作总结
2014/12/01 职场文书
仓管员岗位职责
2015/02/03 职场文书
团员自我评价范文
2015/03/10 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python