vue中的动态组件和混入

目录

一、动态组件

二、混入

全局混入:

局部混入:

混入规则:


一、动态组件

component标签动态切换组件,使用is属性切换组件

diff 复制代码
        <!-- 使用component动态切换组件 is属性 组件名称 -->
        <component v-bind:is="current"></component>

使用component切换组件,组件会不停的创建和销毁,如果想在第一次创建时候缓存组件,可以使用keep-alive包裹

diff 复制代码
        <!-- keep-alive作用: 希望第一次创建组件时候被缓存 后续切换不会重新创建和销毁 -->
        <keep-alive>
            <component v-bind:is="current"></component>
        </keep-alive>

与keep-alive相关生命周期:

activated 使用keep-alive缓存的组件激活(进入)的时候触发

diff 复制代码
            activated(){
                console.log('被keep-alive缓存的组件激活的时候触发 进入组件时触发');
            },

deactivated 使用keep-alive缓存的组件失活(离开)的时候触发

diff 复制代码
            deactivated(){
                console.log('被kepp-alive缓存的组件失活的时候触发 离开组件的时候触发');
            },

errorCaptured 捕获后代组件错误 error(错误对象),vm(发生错误的组件),info(错误提示字符串)

diff 复制代码
            // 捕获后代组件发生错误时触发
            errorCaptured(err, vm, info){
                console.log(err,'发生错误');
                console.log(vm,'发生错误组件');
                console.log(info,'字符串信息提示');
            },

二、混入

分为Vue可复用的功能,可以对数据和对象选项进行混入,接收组件任意选项。

全局混入:

全局混入对象会影响到每一个组件,谨慎使用。

diff 复制代码
        // 混入对象配置项  混入作用: 分发Vue的可复用功能
        let myMixin = {
            data() {
                return {
                    mixinData:'我是混入对象的数据',
                    msg:'我是混入对象的msg'
                }
            },
            created(){
                console.log('我是混入对象的生命周期');
            },
            beforeMount(){
                console.log('beforeMount');
            },
            methods: {
                foo(){
                    return this.mixinData
                },
                bar(){
                    console.log('我是混入对象的bar方法');
                }
            },
        }
        // 全局混入 会把混入对象混入到每一个组件中  影响每一个组件   谨慎使用
        Vue.mixin(myMixin);
局部混入:

mixins:[mixin]

diff 复制代码
            // 局部混入  只会合并到当前的实例组件中
            mixins:[myMixin],
混入规则:

1.data选项会进行合并,如果data数据发生冲突,会保留组件内的数据。

2.生命周期(钩子函数)会被合并到一个数组并依次调用,混入对象的生命周期先调用。

3.值为对象选项(methods,computed,watch,directive)也会合并到一个对象中,如果对象键冲突保留组件内的键值对。


相关推荐
理想不理想v5 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我6 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记19 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜20 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=20 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧22 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck24 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui