Vue3：组件的注册、定义和使用

1、h渲染函数

• vue2 系统自动注入的渲染函数

import { createApp } from 'Vue';
import App from './App.vue';

new Vue({
    h: //系统自动注入的渲染函数
    render(h){
        return h(App);
    }
});

• vue3 手动按需导入h渲染函数

import { createApp,h } from 'Vue';//手动导入h渲染函数
import App from './App.vue';

createApp({ 
    render(h){
        //调用渲染函数h进行组件渲染
        return h(App);
        //h创建元素对象：h('元素名'，{/*属性集合*/},['子节点'])
        returb h('h1',{style:{color:'red'}},'hello');
    }
}).mount('#app');

2、teleport瞬移组件的位置

• teleport是一个vue3中提供的系统组件
• 可以让开发者动态指定组件内的某个视图结构的挂载位置 语法:

  <teleport to="挂载节点">
      <div></div>
  </teleport>

3、全局组件

• vue2全局组件的注册

vue.component('组件名',{
    /* 组件对象 */
});

• vue3全局组件的注册

import { creatApp} from 'Vue';
//创建实例对象
const app = creatApp();
//注册全局组件
app.component('组件名',{
    /* 组件对象 */
})

4、函数式组件

• 通过函数方式定义的组件
• 函数组件默认没有状态数据和生命周期
• 语法：

const main = function(){
    //返回组件的视图
    return h('h1',{},'函数组件');
}

例子：
FunComponent.js

import { h } from 'Vue';//手动导入h渲染函数
export default function FunComponent(){ 
     returb h('h1',{style:{color:'red'}},'hello');
};
//传参
export default function FunComponent(val){ 
     returb h('h1',{style:{color:'red'}}, val.msg);
};

App.vue

<script>
//导入函数组件
import FunComponent from './pages/FunComponent';

export default{
    component : {FunComponent }
}
</script>

<template>
    <FunComponent/>
    //传参
    <FunComponent msg="hello FunComponent"/>
</template>

5、异步组件

1. 新的 defineAsyncComponent 助手方法，用于显式地定义异步组件
2. component 选项被重命名为 loader
3. Loader 函数本身不再接收 resolve 和 reject 参数，且必须返回一个 Promise

• vue2,异步组件是通过将组件定义为返回 Promise 的函数来创建的，例如：

const Home=()=>import('./pages/Home.vue');

或者，对于带有选项的更高阶的组件语法：

const asyncModal = {
  component: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

• vue3,由于函数式组件被定义为纯函数，因此异步组件需要通过将其包裹在新的 defineAsyncComponent 助手方法中来显式地定义：

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// 不带选项的异步组件
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// 带选项的异步组件
const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
}) 

component 选项现在被重命名为 loader，loader 函数不再接收 resolve 和 reject 参数，且必须始终返回 Promise。