1.前言
2.全局注册
- 2.x版本直接调用Vue.component()方法进行全局注册，所有Vue实例都能使用，包括其组件
//组件代码省略
var someComponent = {}
Vue.component('some-component',someComponent)
- 3.x版本全局注册从语法调用层面就可以看出，只能针对当前Vue实例以及其组件，这里与2.x是有区别的
var some_component = {
'template':"我是组件
",
}
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字段进行注册，无论是在实例中还是父组件中注册的子组件，则只能在其实例对应的template中使用
//组件
var some_component = {
'template':"子组件
",
}
new Vue({
el:"#app",
data(){
return {
}
},
//some-component只能在el对应的html模版中使用，其子组件不得直接调用
components:{
'some-component':some_component,
}
})
var some_component = {
'template':"我是组件
",
}
var app = Vue.createApp({
data() {
return {
msg: "实例1",
}
},
components:{
'some-component':some_component,
}
})
app.mount('#app')
4.动态组件
- 2.x和3.x在动态组件的使用方式是一致的,在component标签的中使用 is 属性 来切换不同的组件
//核心代码
- 组件缓存：组件在切换时，默认会丢失缓存数据，可以使用keep-alive标签将其包裹起来，使其状态和数据得以缓存
//组件1
var some_component = {
'template':"",
}
//组件2
var some_component2 = {
'template':"",
}
5.异步组件基础
- 组件注册默认情况下是同步的，即：先下载完组件资源，再进行注册，例如element-ui的相关组件，先下载其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: 'I am async!
'
}
//执行resolve 传入组件代码
resolve(component_code)
}, 1000)
})
- 3.x使用专用的方法Vue.defineAsyncComponent()来定义一个异步组件，此方法接受一个返回 Promise 的工厂函数，在这个工厂函数中发送请求回去组件代码，执行resolve方法即可
const async_example = Vue.defineAsyncComponent(
//接收一个函数，这个函数返回一个promise
() => {
return new Promise((resolve, reject) => {
//组件渲染后执行这里的代码
console.log('模拟ajax请求')
//使用定时器模拟ajax请求
setTimeout(function () {
//模拟后台返回的组件代码
var component_code = {
template: 'I am async!
'
}
//执行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.异步组件实际应用
- 实际开发中，组件都是以.vue文件的形式存在的，通过ajax异步获取组件代码不仅需要变异转码，还需要服务器的接口支持，显然不实际（除非使用专门的插件httpVueLoader），上面的例子只为了解底层的运作原理，需要用到异步组件时，基本上都是脚手架项目
- 2.x脚手架项目异步组件使用方法：在箭头函数中使用import引入组件文件,在第一次激活该组件时，页面会加载一个js文件
components: {
"async-example": () => import('@/components/async-example.vue')
},
- 3.x脚手架项目异步组件使用方法：引入并调用defineAsyncComponent()方法，传入箭头函数，使用import引入组件文件,在第一次激活该组件时，页面会加载一个js文件
import { defineAsyncComponent } from 'vue'
components: {
"async-example": defineAsyncComponent(()=> import('@/components/async-example.vue'))
},