Vue.js 组件注册

1.前言

  • 本节讲述组件和2.x版本和3.x版本的注册方式

2.全局注册

  • 2.x版本直接调用Vue.component()方法进行全局注册，所有Vue实例都能使用，包括其组件
//组件代码省略
var someComponent = {}
Vue.component('some-component',someComponent)
  • 3.x版本全局注册从语法调用层面就可以看出，只能针对当前Vue实例以及其组件，这里与2.x是有区别的
var some_component = {
    'template':"<h3>我是组件</h3>",
}
    
var app = Vue.createApp({
    data() {
        return {
                msg: "实例1",
        }
    },
})
//全局注册？ 只能用于当前实例和其组件
app.component('some-component', some_component)
app.mount('#app')

//这个实例不能直接调用上面的 some_component 组件
var app2 = Vue.createApp({
    data() {
        return {
                msg: "实例2",
        }
    },
})

3.局部注册

  • 2.x和3.x都是通过配置component字段进行注册，只能在当前实例中使用，其子组件中不得使用
//组件
var some_component = {
   'template':"<h3>子组件</h3>",
}
new Vue({
    el:"#app",
    data(){
        return {
           
        }
   },
   components:{
        'some-component':some_component,
   }
})

var some_component = {
    'template':"<h3>我是组件</h3>",
}
    
var app = Vue.createApp({
    data() {
        return {
            msg: "实例1",
        }
   },
    components:{
        'some-component':some_component,
    }
})


app.mount('#app')

4.动态组件

  • 通过component标签的中使用 is 属性 来切换不同的组件，is属性值对应组件注册是的组件名称(string)
//核心代码
<component :is="currentTabComponent"></component>

<body>
    <div id="app" v-cloak>
        <div>
            <button @click="toggleComponent">切换组件</button>
        </div>
        <div>
            <component :is="active_component"></component>
        </div>
    </div>
</body>

<script>
    //组件1
    var some_component = {
        'template':"<h3>子组件</h3>",
    }

    //组件2
    var some_component2 = {
        'template':"<h3>子组件2</h3>",
    }

    
    new Vue({
        el:"#app",
        data(){
            return {
                //默认是 组件1
                active_component: some_component,
                component_index:0
            }
        },
        components:{
            'some-component':some_component,
            'some-component2':some_component2
        },
        methods:{
            toggleComponent(){
                if(this.component_index == 0){
                    this.active_component = 'some-component2'
                    this.component_index = 1
                }else{
                    this.active_component = 'some-component'
                    this.component_index = 0
                }
            }
        }
    })
</script>
  • 组件缓存：组件在切换时，默认会丢失缓存数据，可以使用keep-alive标签将其包裹起来，使其状态和数据得以缓存
<!-- 失活的组件将会被缓存！-->
<keep-alive>
     <component :is="active_component"></component>
</keep-alive>

//组件1
var some_component = {
    'template':"<input type='text'></input>",
}

//组件2
var some_component2 = {
    'template':"<input type='text'></input>",
}

5.异步组件基础

  • 组件从数据类型来说其实就是一个对象，其注册的步骤一般为：先下载组件资源（组件的相关代码文件js），再执行Vue.use()进行组件注册
  • 异步组件就是先进行组件注册，等需要渲染这个组件时，再下载对应的组件资源，这样的做法是为了节省资源，即需要渲染哪个组件时再去下载组件资源
  • 同步组件和异步组件的注册方法是一致的，作为区分的是：同步组件的值其实是一个对象，而异步组件是一个函数，这个函数在2.x和3.x中有些区别
  • 2.x的异步组件:把组件的值设置成一个function，等第一次渲染这个组件时（后续切换不会重复执行），这个方法就会执行，在这个方法中通过ajax获取组件代码后执行resolve()方法
 Vue.component('async-example', function (resolve, reject) {
        //组件第一次渲染会执行这里的代码

        //使用定时器模拟ajax请求
        setTimeout(function () {
            //模拟后台返回的组件代码
            var component_code = {
                template: '<div>I am async!</div>'
            }
            //执行resolve 传入组件代码
            resolve(component_code)
        }, 1000)
    })
  • 3.x使用专用的方法Vue.defineAsyncComponent()来定义一个异步组件，此方法接受一个返回 Promise 的工厂函数，在这个工厂函数中通过ajax获取组件代码后执行resolve()方法
const async_example = Vue.defineAsyncComponent(
        //接收一个函数，这个函数返回一个promise
        () => {
            return new Promise((resolve, reject) => {
                //组件渲染后执行这里的代码
                console.log('模拟ajax请求')

                //使用定时器模拟ajax请求
                setTimeout(function () {
                    //模拟后台返回的组件代码
                    var component_code = {
                        template: '<div>I am async!</div>'
                    }
                    //执行resolve 传入组件代码
                    resolve(component_code)
                }, 1000)
            })
        }
    )

var app = Vue.createApp({
        data() {
            return {
                msg: "实例1",
                //默认是 组件1
                flag: false,
            }
        },
        components: {
            "async-example": async_example
        },
        methods: {
            toggleComponent() {
                this.flag = !this.flag
            }
        }
    })


    app.mount('#app')

6.异步组件应用

  • 在非脚手架项目中，异步组件意义不大，因为自定义的组件都是按单文件组件 (SFC) 规范来编写的，通过ajax获取其代码后还要经过编译，这个编译需要专门的插件来完成（httpVueLoader），上面的例子只为了解底层的运作原理，需要用到异步组件时，基本上都是脚手架模式
  • 脚手架模式中，如果组件被定义成异步组件，会将其打包成一个js文件，激活此组件时，页面会加载这个js文件
  • 2.x脚手架项目异步组件使用方法：在箭头函数中使用import引入组件文件
components: {
    "async-example": () => import('@/components/async-example.vue')
},
  • 3.x脚手架项目异步组件使用方法：引入并调用defineAsyncComponent()方法，传入箭头函数，使用import引入组件文件
import { defineAsyncComponent } from 'vue'
components: {
      "async-example": defineAsyncComponent(()=> import('@/components/async-example.vue'))
},
posted @   ---空白---  阅读(236)  评论(0)  编辑  收藏  举报
相关博文：
· Vue.js 组件基础
· Vue.js 组件数据交互
· vue.js之组件
· 【vue3入门】-【20】组件注册方式
· Vue3：注册组件
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示