组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽

组件插槽的作用

组件插槽：父组件向子组件传递内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><alert-box>有bug发生</alert-box><alert-box>有一个警告</alert-box><alert-box></alert-box></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">Vue.component('alert-box', {template: `<div><strong>ERROR:</strong><slot>默认内容</slot></div>`});var vm = new Vue({el: '#app',data: {}});</script>
</body>
</html>

具名插槽用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><base-layout><p slot='header'>标题信息</p><p>主要内容1</p><p>主要内容2</p><p slot='footer'>底部信息信息</p></base-layout>
<hr><base-layout><template slot='header'><p>标题信息1</p><p>标题信息2</p></template><p>主要内容1</p><p>主要内容2</p><template slot='footer'><p>底部信息信息1</p><p>底部信息信息2</p></template></base-layout></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*具名插槽*/Vue.component('base-layout', {template: `<div><header><slot name='header'></slot></header><main><slot></slot></main><footer><slot name='footer'></slot></footer></div>`});var vm = new Vue({el: '#app',data: {}});</script>
</body>
</html>

作用域插槽

应用场景：父组件对子组件的内容进行加工处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<style type="text/css">.current {color: orange;}
</style>
<body><div id="app"><fruit-list :list='list'><template slot-scope='slotProps'><strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong><span v-else>{{slotProps.info.name}}</span></template></fruit-list></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*作用域插槽*/Vue.component('fruit-list', {props: ['list'],template: `<div><li :key='item.id' v-for='item in list'><slot :info='item'>{{item.name}}</slot></li></div>`});var vm = new Vue({el: '#app',data: {list: [{id: 1,name: 'apple'},{id: 2,name: 'orange'},{id: 3,name: 'banana'}]}});</script>
</body>
</html>

组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽相关推荐

Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则
组件间数据交互父组件向子组件传值 1. 组件内部通过props接收传递过来的值 2. 父组件通过属性将值传递给子组件父组件向子组件传值-基本使用 <!DOCTYPE html> < ...
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
020_Vue非父子组件之间数据交互
1. 非父子组件之间数据交互 1.1. 单独的事件中心管理组件间的通信 var eventHub = new Vue(); 1.2. 监听事件 eventHub.$on('event-name', f ...
三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码组件是自定义元素(对象) ...
【Vue2 组件间数据的双向绑定】
组件间数据的双向绑定一.通过自定义事件二.通过v-model 三.通过.sync修饰符四.provide和inject 代码中的p-8,mt-8等,都是自己写的工具类,复制代码的同学,可以自行删 ...
系统间数据交互的方案探讨
系统间数据交互的方案探讨 ===================================== 互联网时代, 1等公民是建立规范和协议的人 2等公民是提供服务的人 3等公民是开发软件的人 4等公 ...
天气数据采集微服务的实现：数据采集组件、数据存储组件
天气数据采集微服务的实现天气数据采集服务包含数据采集组件.数据存储组件.其中,数据采集组件是通用的用于采集天气数据的组件,而数据存储组件是用于存储天气数据的组件. 在micro-weather-re ...
可视化 | Echarts基础异步加载数据交互组件数据集
目录 1. ECharts 简介 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 图饼 5. ECharts 样式设置 6. ECharts 异步加载数据 7. EC ...

组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽

组件插槽的作用

组件插槽：父组件向子组件传递内容

具名插槽用法

作用域插槽

组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽相关推荐

最新文章

热门文章