第二十二篇:有关插槽solt的使用
2024-09-07 20:44:40
1.什么是插槽?
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,
父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签
2.其作用?
感觉是为了使插入更加灵活,用于实现一些特定的功能.
3.props是什么?
也就是props
是子组件访问父组件数据的唯一接口。
详细一点解释就是:
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。
父组件的数据需要通过 prop 才能下发到子组件中。
一个组件可以直接在模板里面渲染data里面的数据(双大括号)。
子组件不能直接在模板里面渲染父元素的数据。
如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据。
然后在模板里渲染这个变量(前面的a),这时候渲染出来的就是父元素里面的数据。
我把他理解为父子间的接口
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层,模板-->
<div id="vue">
<todo> //插槽绑定todo-titile, ":"冒号后面的是props的title ,这个是数据detitle;就能实现动态绑定然后输出"秦老师系列课程",这真是太麻烦了
<todo-title slot="todo-title" :title="title"></todo-title>
<!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>-->
<!--如下为简写-->
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items
</todo>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component('todo',{ //定义组件
template:'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component('todo-title',{
props:['title'], //接口为title
template:'<div>{{title}}</div>'
});
//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component("todo-items",{
props:["item","index"], //接口为item,index
template:"<li>{{index+1}},{{item}}</li>"
});
var vm = new Vue({
el:"#vue",
data:{
title:"秦老师系列课程",
todoItems:['test1','test2','test3'] //返回数据
}
});
</script>
</body>
</html>
最新文章
- ionic 踩过的坑
- ORACLE10gRAC数据库迁移至10gRAC
- 阿里云 OSS+CDN
- C++函数中那些不可以被声明为虚函数的函数
- Flex编译探索:FLEXSDK自带编译器与MAVEN插件Flex-mojos
- C#委托基础
- day06
- 技能CDDemo(点击鼠标左键实现技能界面旋转)
- CSDN博客越来越垃圾了,到处放广告
- C机器级移位,编码表示 无符号编码表示,有符号编码表示一般最常见的方式是补码
- 尚硅谷springboot学习35-启动原理
- python生成器中yield和send分析
- npm的影武者 —— Npx
- Velocity中的ComparisonDateTool、MathTool、NumberT...
- Hadoop书签
- TDD中的单元测试写多少才够?
- onethink判断是否是手机访问?
- Java自带线程池和队列详解
- angularJs的作用域和依赖注入
- Cordova - 禁用整个应用页面的上下拖动效果(防止拖动出现黑边)