vue之动态组件&插槽

1.动态组件

<!-- <component :is="who"></component>-->
<!-- component标签的is属性等于组件名字，这里就会显示这个组件-->
<!--keep-alive的使用：可以将组件缓存，后期切过来时资源不会被销毁-->

<!--动态组件start-->
<div id="trends">
    <button @click="who='home'">首页</button>
    <button @click="who='order'">订单</button>
    <button @click="who='good'">商品</button>
    <hr>
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>
</div>
<!--动态组件end-->

var home = {template: `<h1>首页</h1>`,}
var order = {template: `<div><h1>订单</h1> <input type="text"> <button>搜索</button></div>`,}
var good = {template: `<h1>商品</h1>`,}
let vm1 = new Vue({
    el: "#trends",
    data: {who: 'home'},
    components: {home, order, good}
})

2.插槽

一般插槽

# 一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据 只能去组件中修改，扩展性很差
# 然后就出现了插槽这个概念，只需在组件中添加<slot></slot>，就可以在body的组件标签中添加内容


# 使用步骤：
    # 1 在组件的html的任意位置，放个标签
        <slot></slot>
    # 2 后期在父组件使用该组件时
        <lqz>
        放内容
    		</lqz>
		# 3 放的内容，就会被渲染到slot标签中

具名插槽

# 使用步骤：
1 组件中可以留多个插槽，命名
    <div>
        <h1>我是一个组件</h1>
        <slot name="middle"></slot>
        <h2>我是组件内部的h2</h2>
        <slot name="footer"></slot>
    </div>
2 在父组件中使用时，指定某个标签渲染到某个插槽上
    <lqz>
        <div slot="footer">
            我是div
        </div>

        <img src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt="" slot="middle">

    </lqz>

<!--slot插槽start-->
<div id="insert">
    <aque>
        <div>一般插槽</div>
        <div slot="footer">具名插槽</div>
    </aque>
</div>
<!--slot插槽end-->

var aque = {template: `<div> <h1>第一行</h1><slot name="footer"></slot><h1>第二行</h1><slot ></slot> </div>`,}
let vm2 = new Vue({
    el: '#insert',
    components: {aque}
})