前端架构vue动态组件使用基础教程

目录
  • 1、基本使用
  • 2、配合 keep-alive使用

1、基本使用

新建组件 Article.vue

<template>
    <div>
        <p>黄州东南三十里为沙湖,亦曰螺师店。予买田其间,因往相田得疾。</p>
        <p>闻麻桥人庞安常善医而聋。遂往求疗。</p>
        <p>安常虽聋,而颖悟绝人,以纸画字,书不数字,辄深了人意。</p>
        <p>余戏之曰:“余以手为口,君以眼为耳,皆一时异人也。”</p>
        <p>疾愈,与之同游清泉寺。</p>
        <p>寺在蕲水郭门外二里许,有王逸少洗笔泉,水极甘,下临兰溪,溪水西流。</p>
        <p>余作歌云:“山下兰芽短浸溪,松间沙路净无泥,萧萧暮雨子规啼。</p>
        <p>谁道人生无再少?君看流水尚能西,休将白发唱黄鸡。”</p>
        <p>是日剧饮而归。</p>
    </div>
</template>

新建组件 Poetry.vue

<template>
    <div>
        <p>春宵</p>
        <p>苏轼 </p>
        <p>春宵一刻值千金,花有清香月有阴。</p>
        <p>歌管楼台声细细,秋千院落夜沉沉。</p>
    </div>
</template>

新建 Learn.vue

并在 Learn.vue 中引入 Article.vue 和 Poetry.vue

本文中 Learn.vue 、Article.vue、Poetry.vue 在同一文件夹下

<template>
    <div>
        <component :is="currentComponent"></component>
        <button @click="changeComponent">修改组件</button>
    </div>
</template>
<script>
import Article from './Article.vue'
import Poetry from './Poetry.vue'
export default {
    components: {
        Article,
        Poetry
    },
    data() {
        return {
            currentComponent: 'Article'
        }
    },
    methods: {
        changeComponent() {
            this.currentComponent = 'Poetry'
        }
    }
}
</script>

动态组件,即使用 component 标签,通过 is 属性指定的名称来切换不同的组件

运行效果

2、配合 keep-alive 使用

keep-alive 可以保持这些组件的状态,如果需要保持组件的状态,则需要配合 keep-alive 一起使用

先看需要保持状态,而不使用 keep-alive 的情况

新建 Manuscript.vue

<template>
    <div>
        <form action="">
            <input type="text" name="title" />
            <br>
            <input type="text" name="content" />
        </form>
    </div>
</template>

修改 Learn.vue

<template>
    <div>
        <component :is="currentComponent"></component>
        <button @click="changeComponent(1)">诗歌</button>
        <button @click="changeComponent(2)">稿件</button>
    </div>
</template>
<script>
import Poetry from './Poetry.vue'
import Manuscript from './Manuscript.vue'
export default {
    components: {
        Poetry,
        Manuscript
    },
    data() {
        return {
            currentComponent: 'Poetry'
        }
    },
    methods: {
        changeComponent(type) {
            if(type == 1) {
                this.currentComponent = 'Poetry'
            }
            if(type == 2) {
                this.currentComponent = 'Manuscript'
            }
        }
    }
}
</script>

运行效果

看运行效果,会发现在 稿件 中输入文字后,切回到 诗歌,再回到 稿件,之前的 稿件 信息就不见了

出现这个情况的原因是,每次切换新组件的时候,Vue 都创建了一个新的组件。因此,如果需要保存原来的组件信息,要配合 keep-alive 使用

添加 keep-alive 后的 Learn.vue

使用 <keep-alive> 标签将动态组件包裹起来

<template>
    <div>
        <keep-alive>
            <component :is="currentComponent"></component>
        </keep-alive>

        <button @click="changeComponent(1)">诗歌</button>
        <button @click="changeComponent(2)">稿件</button>
    </div>
</template>
<script>
import Poetry from './Poetry.vue'
import Manuscript from './Manuscript.vue'
export default {
    components: {
        Poetry,
        Manuscript
    },
    data() {
        return {
            currentComponent: 'Poetry'
        }
    },
    methods: {
        changeComponent(type) {
            if(type == 1) {
                this.currentComponent = 'Poetry'
            }
            if(type == 2) {
                this.currentComponent = 'Manuscript'
            }
        }
    }
}
</script>

运行效果

以上就是前端架构vue动态组件使用基础教程的详细内容,更多关于前端架构vue动态组件教程的资料请关注我们其它相关文章!

(0)

相关推荐

  • Vue动态组件与异步组件实例详解

    本文实例讲述了Vue动态组件与异步组件.分享给大家供大家参考,具体如下: 1 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题.例如我们来展开说一说这个多标签界面: 你会注意到,如果你选择了一篇文章,切换到

  • vue 动态创建组件的两种方法

    Vue动态创建组件实例并挂载到body 方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(c

  • Vue高级用法实例教程之动态组件

    目录 基础描述 AST解析 render函数 普通组件和动态组件的对比 工厂函数形式的动态组件 总结 动态组件我相信大部分在开发的过程中都会用到,当我们需要在不同的组件之间进行状态切换时,动态组件可以很好的满足我们的需求,其中的核心是component标签和is属性的使用. 基础描述 // vue <div id="app"> <button @click="changeTabs('child1')">child1</button>

  • Vue动态组件实例解析

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件 <div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></compon

  • Vue 自定义动态组件实例详解

    现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件. 举第一个栗子 用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示: index.vue里写我们的组件,代码如下: index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下: 接下来我们要在默认的main.js里将刚刚写的index.js

  • vue动态子组件的两种实现方式

    文章目录 方式一:局部注册所需组件 使用缓存 方式二:动态注册组件实现 让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <div id="example"> <button @click="change">切换页面</button> <component :is="curre

  • 前端架构vue动态组件使用基础教程

    目录 1.基本使用 2.配合 keep-alive使用 1.基本使用 新建组件 Article.vue <template> <div> <p>黄州东南三十里为沙湖,亦曰螺师店.予买田其间,因往相田得疾.</p> <p>闻麻桥人庞安常善医而聋.遂往求疗.</p> <p>安常虽聋,而颖悟绝人,以纸画字,书不数字,辄深了人意.</p> <p>余戏之曰:"余以手为口,君以眼为耳,皆一时异人也.&

  • 前端架构vue架构插槽slot使用教程

    目录 1.直接使用 2.设置默认值 3.多个slot用法 4.作用域插槽 5.动态插槽名 1.直接使用 新建组件 Article <template> <div> 日期:2022-01-15 <slot></slot> </div> </template> 新建 Learn,并在 Learn 中使用 Article Learn.vue 和 Article.vue 在同一文件夹下 <template> <div>

  • Vue全家桶入门基础教程

    1. Vue概述 Vue(读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. 渐进式: 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 可以使用其中的一个或者多个 优点: 易用:熟悉HTML,CSS.JavaScript知识后,可快速上手Vue 灵活:在一个库和一套完整框架之间自如伸缩 高效:20kB运行大小,超快虚拟DOM 2. Vue的基本使用 2.1 传统开发模式对比 /

  • vue 动态组件(component :is) 和 dom元素限制(is)用法说明

    一.is的使用 参考Vue 2.0教程,有讲到 is 的使用: 解析 DOM 模板时的注意事项 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的.而有些元素,诸如 <li>.<tr> 和 <option>,只能出现在其它某些特定的元素内部. 这会导致我们使用这些有约束条件的元素时遇到一些问题.例如: <table> <blog

  • 深入了解Vue动态组件和异步组件

    1.动态组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #app { font-size: 0 } .dynamic-component-demo-tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1p

  • vue动态组件实现选项卡切换效果

    本文实例为大家分享了vue动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"&g

  • Vue 动态组件与 v-once 指令的实现

    本文介绍了Vue 动态组件与 v-once 指令的实现,分享给大家,具体如下: <div id="root"> <child-one></child-one> <child-two></child-two> <button>change</button> </div> Vue.component('child-one', { template: `<div>child-one&l

  • VUE 动态组件的应用案例分析

    本文实例讲述了VUE 动态组件的应用.分享给大家供大家参考,具体如下: 业务场景 我们在开发表单的过程中会遇到这样的问题,我们选择一个控件进行配置,控件有很多中类型,比如文本框,下来框等,这些配置都不同,因此需要不同的配置组件来实现. 较常规的方法是使用v-if 来实现,这样界面看上去比较复杂,而且需要进行修改主页面. 解决方案 可以使用动态组件来实现,为了体现动态组件的特性,我们简化实现方式,编写两个简单的组件来测试一下这个功能. 文本组件配置: <template> <div>

随机推荐