详解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加ASP二级域名转向的代码
May 17 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 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
xml+php动态载入与分页
2006/10/09 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
js函数般调用正则
2008/04/08 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
Python内置函数dir详解
2015/04/14 Python
Python制作简易注册登录系统
2016/12/15 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
利用python求积分的实例
2019/07/03 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
金融保险专业求职信
2014/09/03 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
教师个人教学总结
2015/02/11 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
盗窃案辩护词
2015/05/21 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
追悼词范文大全
2015/06/23 职场文书
中学教师读书笔记
2015/07/01 职场文书