Vue学习笔记8：vue3组件化开发3-组件加载

1.1异步组件

webpack中的分包操作：

通过import函数导入的模块，后续webpack会对其打包的时候，会进行分包操作

import("./src/math.js").then((res)=>{
    console.log(res.foo(10,20))
})

该模块不会加入到app.js中，会生成单独的chunk文件

vue3 中的异步组件：

App.vue

    <template>
  <div>
      <async></async>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
const Async = defineAsyncComponent(()=>import("./async.vue"))
export default {
  name: 'App',
  components:{
      Async
  }
}
</script>

defineAsyncComponent 也可以接受一个对象参数：

import { defineAsyncComponent } from "vue";
const Async = defineAsyncComponent({
    loader:()=>import("./async.vue"),
    // 加载前展示组件
    loadingComponent:loading,
    // 错误组件：
    errorComponent:error,
    // 显示loading之前，等待时间
    delay:1000,
    // err:错误信息
    // retry：函数，指示是否应该尝试重新加载
    // fail:函数，指示加载程序结束退出
    // attempt：允许的最大重试次数
    onError:(err,retry,fail,attempts)=>{

    }
})

1.2异步组件和Suspence

Suspence：adj，悬而未决的。 Suspence是一个内置的全局组件，该组件有两个插槽：

1. default： 如果default可以显示，优先显示该组件
2. fallback： 如果default无法显示，显示该插槽内容

<template>
  <div>
      <suspence>
          <template #default>
              <async></async>
          </template>
          <template #fallback>
              <loading></loading>
          </template>
      </suspence>
  </div>
</template>

<script>
import {defineAsyncComponent} from 'vue'
import loading from './loading.vue'
const Async = defineAsyncComponent(()=>import("./async.vue"))
export default {
  name: '',
  components:{
      Async,
      loading
  }
}
</script>

2 ref的使用

$ref是组件的一个内置对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例

<template>
  <div>
      <div ref="div"></div>
      <son ref="son"></son>
  </div>
</template>

<script>
import son from './son.vue'
export default {
  components: { son },
  mounted () {
      console.log(this.$refs.div)
      console.log(this.$refs.son)
  }
}
</script>

可以通过$refs.son.xxx获取子组件中的数据，或者调用子组件中的方法

同时可以通过$parent访问父组件

通过$root访问根组件

3 组件的v-model

myinput.vue

<template>
  <div>
      <input type="text" v-model="value">
  </div>
</template>

<script>
export default {
  name: '',
  props:{
      modelValue:String
  },
  emits:['update:modelValue'],
  computed:{
      value:{
          set(value){
              this.$emit('update:modelValue',value)
          },
          get(){
              return this.modelValue
          }
      }
  }
}
</script>

app.vue

<template>
    <my-input v-model="appmessage"></my-input>
    {{appmessage}}
</template>
<script>
import MyInput from './components/myInput.vue';
export default {
  name: 'App',
  components: {
    MyInput
  },
  data(){
    return {
      appmessage:'default'
    }
  },
}
</script>

自定义组件通过v-model绑定父组件中的变量，同时子组件通过modelValue接收该值

子组件中通过计算属性的set和emit事件修改父组件中的变量值