1 组件切换之笨办法
2 动态组件
3 动态组件之keep-alive
1 组件切换之笨办法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="who='home'">首页</button>
<button @click="who='good'">商品</button>
<button @click="who='order'">订单</button>
<hr>
<home v-if="who=='home'"></home>
<good v-else-if="who=='good'"></good>
<order v-else></order>
</div>
</body>
</html>
<script>
var home = {
template: `
<div>
<h1>首页</h1>
</div>`
}
var good = {
template: `
<div>
<h1>商品页面</h1>
</div>`
}
var order = {
template: `
<div>
<h1>订单页面</h1>
</div>`
}
let vm = new Vue({
el: '#app',
data: {
who: 'home'
},
components:{
home,
good,
order,
}
});
</script>
2 动态组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="who='home'">首页</button>
<button @click="who='good'">商品</button>
<button @click="who='order'">订单</button>
<hr>
<component :is="who"></component>
`component`标签的is属性等于组件名字,这里就会显示这个组件
</div>
</body>
</html>
<script>
var home = {
template: `
<div>
<h1>首页</h1>
</div>`
}
var good = {
template: `
<div>
<h1>商品页面</h1>
</div>`
}
var order = {
template: `
<div>
<h1>订单页面</h1>
</div>`
}
let vm = new Vue({
el: '#app',
data: {
who: 'home'
},
components:{
home,
good,
order,
}
});
</script>
3 动态组件之keep-alive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="who='home'">首页</button>
<button @click="who='good'">商品</button>
<button @click="who='order'">订单</button>
<hr>
keep-alive:用于缓存动态组件或者将组件保持在活动状态,以便在切换页面时不会销毁它们
<keep-alive>
<component :is="who"></component>
</keep-alive>
</div>
</body>
</html>
<script>
var home = {
template: `
<div>
<h1>首页</h1>
</div>`
}
var good = {
template: `
<div>
<h1>商品页面</h1>
<p>
搜索商品:<input type="text" v-model="name">
<button @click="handleSearch">搜索</button>
</p>
</div>`,
data(){
return {
name: ''
}
},
methods: {
handleSearch(){
alert(this.name)
}
}
}
var order = {
template: `
<div>
<h1>订单页面</h1>
</div>`
}
let vm = new Vue({
el: '#app',
data: {
who: 'home'
},
components:{
home,
good,
order,
}
});
</script>
4 插槽
4.1 不具名插槽
插槽:一般情况下,编写完一个组件之后,组件的内容都是写死的,需要加数据,只能去组件中修改,
扩展性很差。然后就出现了插槽这个概念,只需要在组件中添加<slot></slot>,
就可以在body的组件标签中加内容。
--使用步骤:
1.在组件的html的任意位置,放个标签
<slot></slot>
2.后期再父组件中使用该组件时
<lin>
放内容
</lin>
3.放的内容,就会被渲染到slot标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<lin>
<div>
我是div
</div>
</lin>
<hr>
<lin>
<img src="./img/1.jpg" alt="" height="200">
</lin>
</div>
</body>
</html>
<script>
var lin = {
template: `
<div>
<h1>我是一个组件</h1>
<slot></slot>
<h2>我是组件内部的h2</h2>
</div>`
}
let vm = new Vue({
el: '#app',
data: {
},
components:{
lin
}
});
</script>
4.2 具名插槽
--使用步骤:
1 组件中可以留多个插槽,命名
<div>
<h1>我是一个组件</h1>
<slot name="middle"></slot>
<h2>我是组件内部的h2</h2>
<slot name="footer"></slot>
</div>
2 在父组件中使用时,指定某个标签渲染到某个插槽上
<lin>
<div slot="footer">
我是div
</div>
<img src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt="" slot="middle">
</lin>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<lin>
<div slot="footer">
我是div
</div>
<img src="./img/2.jpg" alt="" slot="middel">
</lin>
</div>
</body>
</html>
<script>
var lin = {
template: `
<div>
<h1>我是一个组件</h1>
<slot name="middel"></slot>
<h2>我是组件内部的h2</h2>
<slot name="footer"></slot>
</div>`
}
let vm = new Vue({
el: '#app',
data: {
},
components:{
lin
}
});
</script>