vue-组件-插槽

时间 2020-08-12 标签 vue 组件插槽

vue-组件-插槽

文章目录

***后记*** ：

内容

一、组件插槽

组件插槽的做用：html
- 父组件向子组件传值
组件插槽的基本用法前端
- 位置：组件内部
- 内容：任何页面元素
- 显示：父组件传值，显示传递的值；父组件不传值，显示默认内容；

示例1-1：vue

<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>04_slot</title>
  	<script src="../assets/js/vue.js"></script>
  	<style>
  		.alert > span {
  			color: red;
  		}
  	</style>
  </head>
  <body>
  <div id="app">
  	<alert-box>有一个BUG</alert-box>
  	<alert-box>{{ msg }}</alert-box>
  	<alert-box></alert-box>
  </div>

  <script>
  	Vue.component('AlertBox', {
  		template: `
  			<div class='alert'>
  				<span>ERROR:</span>
  				<slot>默认内容</slot>
  			</div>
  		`
  	})
  	const app = new Vue({
  		el: '#app',
  		data: {
  			msg: '有一个警告'
  		}
  	 });
   </script>
  </body>
  </html>

图示1-1：git

二、具名插槽

具名插槽顾名思义，有name(名字）的插槽。web

定义后端

<slot name="插槽名">默认内容</slot>

用法：见示例app

示例2-1:svg

<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>05_slot-name</title>
  	<script src="../assets/js/vue.js"></script>
  	<style>
  		*{
  			margin: 0;
  			padding: 0;
  		}
  		.container {
  			width: 200px;
  			height: 200px;
  			border: 1px solid #000;
  			box-sizing: border-box;
  			color: #000;
  		}
  		.container header {
  			height: 25%;
  			background-color: coral;
  			text-align: center;
  		}
  		.container main {
  			height: 50%;
  			background-color: cyan;
  		}
  		.container footer {
  			height: 25%;
  			background-color: skyblue;
  		}
  	</style>
  </head>
  <body>
  <div id="app">
  	<base-layout>
  		<h3 slot="header">标题内容1</h3>
  		<p>主体内容1</p>
  		<span slot="footer">底部信息1</span>
  	</base-layout>
  	<base-layout>
  		<template slot="header">
  			<h3>标题内容2</h3>
  		</template slot="header">
  		<p>主体内容2</p>
  		<template slot="footer">
  			<p>底部信息2</p>
  		</template>
  	</base-layout>
  </div>

  <script>
  	Vue.component('base-layout', {
  		template: `
  			<div class="container">
  				<header>
  					<slot name="header"></slot>
  				</header>   
  				<main>
  					<slot></slot>
  				</main>    
  				<footer>
  					<slot name="footer"></slot>
  				</footer>     
  			</div>

  		`
  	})
  	const app = new Vue({
  		el: '#app',
  		data: {

  		},
  		methods:{

  		}
  	 });
   </script>
  </body>
  </html>

示例效果2-1：ui

三、做用域插槽

适用场景：父组件对子组件内容进行加工处理spa
定义：见示例
用法：见示例

示例3-1:

<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>06_slot-scope</title>
  	<script src="../assets/js/vue.js"></script>
  	<style>
  		.current {
  			font-weight: 400;
  			color: orangered;
  		}
  	</style>
  </head>
  <body>
  <div id="app">
  	<data-list :datas="fruits">
  		<template slot-scope="scope">
  			<span :class="{current: (scope.item.id === 2 ? true: false)}"> {{ scope.item.name }}</span>
  		</template>
  	</data-list>
  </div>

  <script>
  	Vue.component('data-list', {
  		props: ['datas'],
  		template: `
  			<div>
  				<li v-for="data in datas" :key="data.id" >
  					<slot :item="data">{{ data.name }}</slot>
  				</li>
  			</div>
  		`
  	})
  	const app = new Vue({
  		el: '#app',
  		data: {
  			fruits: [
  				{
  					id: 1,
  					name: 'apple'
  				},
  				{
  					id: 2,
  					name: 'orange'
  				},
  				{
  					id: 3,
  					name: 'lemon'
  				}
  			]
  		},
  		methods:{

  		}
  	 });
   </script>
  </body>
  </html>

效果图示3-1：

后记：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为本身编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

vue-组件-插槽

vue-组件-插槽

目录

文章目录

内容

一、组件插槽

二、具名插槽

三、做用域插槽

后记 ：

后记：