动态组件
方法一：笨方法-切换组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="who='home'">首页</button>
<button @click="who='goods'">商品</button>
<button @click="who='order'">订单</button>
<hr>
<home v-if="who=='home'"></home>
<goods v-else-if="who=='goods'"></goods>
<order v-else></order>
</div>
</body>
<script>
var home = {
template: `<div>
<h4>首页</h4>
</div>`,
}
var goods={
template: `<div>
<h4>商品页面</h4>
</div>`,
}
var order={
template: `<div>
<h4>订单页面</h4>
</div>`,
}
var vm = new Vue({
el: '#app',
data: {
who:'home'
},
components: {
home,
goods,
order
}
})
</script>
</html>
方法二：动态组件：使用component标签来实现组件之间的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="who='home'">首页</button>
<button @click="who='goods'">商品</button>
<button @click="who='order'">订单</button>
<hr>
<!--使用动态组件：component标签来进行组件的切换：who是那个字符串，就显示哪个组件-->
<component :is="who"></component>
<!-- component标签的is属性等于哪个组件名字，这里就会显示哪个组件-->
</div>
</body>
<script>
var home = {
template: `<div>
<h4>首页</h4>
</div>`,
}
var goods={
template: `<div>
<h4>商品页面</h4>
</div>`,
}
var order={
template: `<div>
<h4>订单页面</h4>
</div>`,
}
var vm=new Vue({
el:'#app',
data:{
who:'home'
},
components:{
home,
goods,
order
}
})
</script>
</html>
who属性：
keep-alive的使用
当我们从一个组件切换到另一个组件的时候，当前这个组件会被销毁。
keep-alive标签，可以帮助我们缓存当前组件，当切到别的组件时，当前组件不会被销毁
小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="who='home'">首页</button>
<button @click="who='goods'">商品</button>
<button @click="who='order'">订单</button>
<hr>
<!--使用动态组件：component标签来进行组件的切换：who是那个字符串，就显示哪个组件-->
<!-- keep-alive：当前组件会缓存在这，后期切到另一个组件上的话，当前组件不会销毁 -->
<Keep-alive>
<component :is="who"></component>
</Keep-alive>
<!-- component标签的is属性等于哪个组件名字，这里就会显示哪个组件-->
</div>
</body>
<script>
var home = {
template: `<div>
<h4>首页</h4>
</div>`,
}
var goods = {
template: `<div>
<h4>商品页面</h4>
<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>
<h4>订单页面</h4>
</div>`,
}
var vm = new Vue({
el: '#app',
data: {
who: 'home'
},
components: {
home,
goods,
order
}
})
</script>
</html>
当没有keep-alive标签包裹时：
结果：
当切换到首页时，在切回商品组件时：
当使用keep-alive标签时：
当切换到首页时，在切回商品组件时：
插槽
一般情况下，编写完一个组件之后，组件的内容都是写死的，需要加数据，只能去组件中修改，扩展性很差。
然后就出现了插槽这个概念，只需要在组件中添加<slot></slot>，就可以在body的组件标签中添加内容
1.不具名插槽：
使用步骤：
-1. 在组件的html的任意位置，放标签<slot></slot>
-2. 后期在父组件中使用该组件时：
比如：局部组件hh
<hh>
写自己需要的内容
</hh>
-3. 放的内容，就会被渲染到slot标签中
小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<hh>
<div>
<h4>看帅哥</h4>
</div>
</hh>
<hr>
<hh>
<img src="666.png" alt="" height="400px">
</hh>
</div>
</body>
<script>
var hh = {
template: `<div>
<h4>我是一个组件</h4>
<slot></slot>
<h5>我是组件内部的h5</h5>
</div>`,
}
var vm=new Vue({
el:'#app',
data:{
who:'home'
},
components:{
hh,
}
})
</script>
</html>
结果：
2. 具名插槽
使用步骤：
-1. 组件中可以留多个插槽，给插槽命名：
比如：
<div>
<h1>我是一个组件</h1>
<slot name="middle"></slot>
<h2>我是组件内部的h2</h2>
<slot name="footer"></slot>
</div>
-2. 在父组件中使用该组件时，可以指定该组件内的某个标签渲染到哪个插槽上
比如：
<hh>
<div slot="footer">
我是div
</div>
<img src="666.jpg" alt="" slot="middle">
</hh>
小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<hh>
<div slot="footer">
我是div
</div>
<img src="666.png" alt="" height="400px" slot="middle">
</hh>
</div>
</body>
<script>
var hh = {
template: `<div>
<h4>我是一个组件</h4>
<!-- 放在组件的中间 -->
<slot name="middle"></slot>
<h5>我是组件内部的h5</h5>
<!-- 放在组件的尾部 -->
<slot name="footer"></slot>
</div>`,
}
var vm=new Vue({
el:'#app',
data:{
who:'home'
},
components:{
hh,
}
})
</script>
</html>
结果：
标签：vue,插槽,var,首页,template,组件,home From： https://www.cnblogs.com/Lucky-Hua/p/17716791.html