526互联

vue-动态组件、插槽

发布时间 2023-09-20 11:06:50作者: Maverick-Lucky

动态组件

方法一：笨方法-切换组件：

<!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>

 

结果：