1.动态组件
<script>
/*
动态组件:
加载哪个组件不一定
在父标签中:
<component :is="模板名"></component>
模板名可以是变量,我们可以通过改变变量控制显示的内容
*/
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click='fun("demo1")'>1</button>
<button @click='fun("demo2")'>2</button>
<button @click='fun("demo3")'>3</button>
<button @click='fun("demo4")'>4</button>
<component :is="zhi"></component>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
zhi: 'demo1'
},
methods: {
fun(v) {
this.zhi = v
}
},
components: {
'demo1': {
template: '<h1>我是demo1的组件niniu</h1>'
},
'demo2': {
template: '<h1>我是demo2的组件heheda</h1>'
},
'demo3': {
template: '<h1>我是demo3的组件666</h1>'
},
'demo4': {
template: '<h1>我是demo4的组件hhh</h1>'
}
}
})
</script>
</html>
2.插槽
<script>
/*
插槽(slot):
1.使用插槽为了让组件更灵活
2.让使用组件的人,可以决定组件内容的变化
模板中:在要插入自定义内容的位置写<slot></slot>
html中: slot 占位的内容写在有要使用的组件中间, <组件名>插槽的内容</组件名>
注: 有多少个solt标签,运行时就有多少个自定义添加的html内容
*/
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>首页</h1>
<my-demo>
<h1> 我是首页的主体内容</h1>
</my-demo>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>购物车</h1>
<my-demo>
<h3>我是购物车主体内容</h3>
<h3>kkkkkkkkk</h3>
</my-demo>
</div>
</body>
<template id="demo">
<div>
<slot></slot>
<div style="width: 100%;height: 200px; background-color: burlywood;">
头部
</div>
<slot></slot>
<div style="width: 100%;height: 200px; background-color: rgb(84, 210, 226);">
尾部
</div>
<slot></slot>
</div>
</template>
</div>
<script>
new Vue({
el: '#app',
components: {
'myDemo': {
template: '#demo'
}
}
})
</script>
</html>
3.具名插槽
<script>
/*
具名插槽(就是有名字的插槽)
用法:
html中:<span slot='插槽名'>首页</span>
模板中:<slot name='插槽名'></slot>
*/
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-demo>
<span slot="right">....</span>
<span slot='center'>搜索<input type="text"></span>
<span slot="left">首页</span>
</my-demo>
<my-demo>
<span slot="left">首页</span>
<span slot="right">...</span>
<span slot="center">库存-销量-评价</span>
</my-demo>
</div>
</body>
<template id="demo">
<div>
<h3>天猫商城</h3>
<slot name='left'></slot>
<slot name='center'></slot>
<slot name='right'></slot>
</div>
</template>
<script>
new Vue({
el:'#app',
components:{
'myDemo':{
template:'#demo'
}
}
})
</script>
</html>
4.列表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-demo :classlist='user'>
<button slot-scope='s1' @click='del1(s1)'>删除</button>
</my-demo>
</div>
</body>
<template id="tem1">
<div>
<table class="table table-bordered">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>classid</td>
<td>操作</td>
</tr>
<tr v-for="(v,k) in classlist" :key="v.name">
<td>{{v.name}}</td>
<td>{{v.age}}</td>
<td>{{v.classid}}</td>
<td>
<slot :id='k'></slot>
</td>
</tr>
</table>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
user: [{
name: '李白',
age: 48,
classid: 'H556'
},
{
name: '张三',
age: 48,
classid: 'H556'
},
{
name: '大白',
age: 48,
classid: 'H556'
},
{
name: '小白',
age: 48,
classid: 'H556'
},
]
},
methods: {
del1(v) {
this.user.splice(v.id, 1)
}
},
components: {
'myDemo': {
template: '#tem1',
props: {
classlist: {
type: Array,
default: ''
}
},
}
}
})
</script>
</html>