组件切换之笨办法、动态组件、动态组件之keep-alive、插槽(不具名、具名)
1 组件切换之笨办法
2 动态组件
3 动态组件之keep-alive
4 插槽
4.1 不具名插槽
4.2 具名插槽
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>
