6-vue-组件切换之笨办法、动态组件(is属性、keep-alive)、插槽(不具名、具名)

已于 2023-11-08 20:32:02 修改
阅读量172 收藏
点赞数
分类专栏： vue 文章标签： 前端 javascript vue.js slot keep-alive component is属性
于 2023-09-20 15:04:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44145338/article/details/133072691
版权

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>
林光虚霁晓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中处理组件切换的三种方式
xiaohanbaby的博客
09-23 3888
Vue中处理组件切换的三种方式： 1.v-if切换： v-if的方式来切换视图:创建和销毁(导致组件的状态不能留存) 2.v-show切换： 显示和隐藏,没有办法操作Dom结构(会保存组件的状态) 3.动态组件切换： 可以操作DOM, 并且可以留存下数据; 切换时触发的生命周期： 激活activated 冻结 deactivated 这两个方法; 用keep-alive可保存组件的状态 代码示例: <template> <div> <butt
props校验 动态组件 keep-alive组件-- 指定缓存 激活失活 插槽
qq_43944285的博客
05-09 520
动态组件 <template> //动态显示组件使用 vue内置 //动态绑定is ,他的值就是组件名字 <components :is="xxx" > </components> </template> components:{ }
Vue - 视图组件切换的方案
Maggieq8324的博客
09-13 2662
目录前言roure-view 切换视图组件v-if 切换视图组件component 切换视图组件 前言 Vue中切换视图组件的方案大致有三种 1、roure-view 适合大幅度视图切换 2、v-if 适合小幅度组件切换 3、component 动态组件 roure-view 切换视图组件 这个不多说了，之前的文章记录：Vue - route路由跳转 v-if 切换视图组件 这个比较简单，如下： <CommonOne v-if="true" /> <CommonTwo v-el
【Vue】组件和元素切换动画的实现
看花容易绣花难
09-22 2050
【Vue】组件和元素切换动画的实现
如何在Vue中实现动态组件切换？
最新发布
有我更精彩的博客
05-23 499
在component标签中，我们绑定了一个动态的‘is’属性，根据currentComponent的值来动态切换显示的组件。当用户点击按钮时，页面上的组件会动态切换展示。这种动态组件切换的方式也非常灵活，可以根据具体业务需求动态地展示不同的组件，提升了页面的交互体验。当我们在Vue项目中需要根据用户的操作或其他条件动态地切换组件时，我们可以使用Vue提供的动态组件特性。首先，我们创建一个基本的Vue组件，假设我们有两个组件：ComponentA和ComponentB，我们想要在页面上动态地切换它们。
vue实现同一个页面某一位置进行不同组件切换展示效果
weixin_51935690的博客
07-27 7019
目录结构如图，在主页面home点击旁边导航切换不同组件在同一页面效果 2、动态路由<component:is="componentnext"></component>用于切换组件，改变componentnext的组件名字即可，利用了动态绑定:class来指定此组件时此导航选中颜色的变化 2.代码即注释如下 <template> <div> <!-- <Top-head></Top-head> --> .
动态组件（:is）、keep-alvie、插槽、自定义组件
ScumStudy的博客
11-04 3549
动态组件 什么是动态组件 动态组件指的是动态切换组件的显示与隐藏 如何实现动态组件渲染 vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染 使用 keep-alive 保持状态 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态 keep-alive 对应的生命周期函数数 当组件被缓存时，会自动触发组件的 deactivated 生命周期函数 当组件被激活时，会自动触发组件的 activated生命周期函数 kee
前端之Vue：生命期钩子、组件、计算属性、全局局部组件、组件通信、ref属性、事件总线、动态组件和 keep-alive、插槽
大大的博客
07-17 1305
目录一、 生命周期图官网原图注解的图二、 生命周期钩子函数测试代码 一、 生命周期图 官网原图 注解的图 二、 生命周期钩子函数 vue 的8个生命周期钩子函数 钩子函数 描述 beforeCreate 创建Vue实例之前调用 created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） beforeMount 渲染DOM之前调用 mounted 渲染DOM之后调用 beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） up
Vue3官网-深入组件（七）父子组件、插槽（\＜slot＞、作用域插值、具名插槽缩写）、 Provide / Inject（响应式）、动态组件`keep-alive`、异步组件 `defineAsyn
qq_43456781的博客
09-19 330
Vue3官网-深入组件（三）父子组件、插槽（<slot>、作用域插值、具名插槽缩写）、 Provide / Inject（响应式）、动态组件keep-alive、异步组件 defineAsyncComponent 文章目录Vue3官网-深入组件（三）父子组件、插槽（\、作用域插值、具名插槽缩写）、 Provide / Inject（响应式）、动态组件`keep-alive`、异步组件 `defineAsyncComponent`1. 插槽\ \插槽内容渲染作用域备用内容具名插槽作用域插槽独占默认
keep-alive v-for为何使用key值 slot插槽和vue及prop验证
m0_56722063的博客
04-19 1301
keep-alive 概念 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 场景 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，希望列表页面可以保留用户的筛选（或选中）状态。 keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性
vue动态组件实现选项卡切换效果
12-29
本文实例为大家分享了vue动态组件实现选项卡切换的具体代码，供大家参考，具体内容如下 导航按钮： <div class=tab-title> <p click=a><router to='/collectnewcars'>新车</router></p> <p click=a><router to='/collectusedcars'>二手车</router></p> <p click=a><router-link to='/collec
VUE切换组件
notagoodwriter的博客
01-06 3397
VUE切换组件
Vue实现动态组件的切换
weixin_56296590的博客
11-09 4163
在这里跟大家分享一下如何实现动态组件的切换，举个例子，就比如组件库中的Steps步骤条，我们可能会去实现一个步骤显示一个页面这样的一个功能。 首先我们要了解component组件，他是vue内置的一个组件，提供了一个is属性来动态的渲染组件 <!-- 通过is属性动态切换组件 --> <div class="steps-content"> <compoment :is="pro[current]"></compoment>
Vue之组件的切换
invalid_oath的博客
03-28 470
一. 使用if和else的组件切换 <div id="app"> <a href="" @click.prevent="flag = true">登录</a> <a href="" @click.prevent="flag = false">注册</a> <login v-if="flag"></login> <register v-else="flag
vue之组件切换
jiaowolaoliu111的博客
07-15 779
组件切换v-if与v-else，Vue中的页面结构是由不同组件构成的，不同组件可以适合不同页面，适合进行单页应用开发。通过v-if和v-else来判断登录页面。flag的值是布尔类型。当点击登录按钮时则显示登录页面，点击注册按钮时显示注册页面。...
关于Vue的组件切换【v-if、v-show、template、component】
qq_22841387的博客
04-03 2936
我们知道在Vue中，页面结构是由组件构成的，不同的组件可以表示不同的页面，适合进行单页面（SPA）开发。 接下来，我们演示登录和注册组件的切换 既然Vue是由组件组成的，那很自然的，我们容易想到，如果我们需要切换各个组件呢？ v-if 通过v-if去渲染组件 示例代码如下 <!DOCTYPE html> <html lang='zh_cn'> <head> <meta charset='UTF-8'> <meta http-equiv
vue组件切换—component标签实现多个组件的切换和组件动画的实现
Scrow1204的博客
09-28 6322
要点：      1. component是一个占位符，：is，用来指定展示组件的名称，通过绑定变量来实现切换      2.只需将&lt;component&gt;组件定义的标签用&lt;transition&gt;包裹起来即可 HTML代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ..
vue点击切换组件
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-22 5497
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="../js/animate.c
Vue组件切换的两种方式
ly_yanbo的博客
04-12 2828
一、使用 v-if 与 v-else 相结合的切换方式 在开发中我们经常会遇到点击按钮或者超链接实现组件的切换。 代码如下： <div id="app"> <a href="" @click.prevent="flag=true">登录</a> <a href="" @click.prevent="flag=false">注册</a...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值