vue3中父子组件的通讯、异步组件的加载、mixin混入、vue3定义全局变量、vue2中的defer延迟装载

vue3的异步组件（滚到位置加载组件）

1、安装依赖

   yarn add @vueuse/core

2、安装好的依赖引入

import { useIntersectionObserver } from “@vueuse/core”

3、vue中引入

import { defineAsyncComponent, ref } from “vue”

4、展示组件的地方加入

<div ref="target">
     <Asynchronous v-if="targetIsVisible"></Asynchronous>
</div>

5、引入子组件

const Asynchronous = defineAsyncComponent(() => import("./components/AsyncComponent.vue"))

6、做判断

const target = ref(null)
const targetIsVisible = ref(false)
const { stop } = useIntersectionObserver(target, (value) => {
    value[0].isIntersecting ? targetIsVisible.value = value[0].isIntersecting : null
})

总结：父组件异步加载组件的代码

<template>
    <div style="height: 1000px">这里是组件的内容，很高，用户直接进来不能直接展示下面异步组件的内容</div>

    <!--  异步组件的加载  -->
    <div ref="target">
        <Asynchronous v-if="targetIsVisible"></Asynchronous>
    </div>
    <!--  异步组件加载  -->

</template>

<script setup>
import { useIntersectionObserver } from "@vueuse/core"
import { defineAsyncComponent, ref } from "vue"

// import Asynchronous from "./components/AsyncComponent.vue"
const Asynchronous = defineAsyncComponent(() => import("./components/AsyncComponent.vue"))
const target = ref(null)
const targetIsVisible = ref(false)
const { stop } = useIntersectionObserver(target, (value) => {
    value[0].isIntersecting ? targetIsVisible.value = value[0].isIntersecting : null
})
console.log(stop)
</script>

<style scoped>

</style>

vue3异步组件

父组件引入：
<Suspense>
	<template #default>
		<Child></Child>
	</template>
	<template #fallback>
		<div>加载中...</div>
	</template>
</Suspense>

const Child = defineAsyncComponent(() => import('./Child.vue'))

vue3父子组件的通讯

父组件传值给子组件

  Father.vue组件中

    <Child :msg=msg></Child>

  Chil.vue组件中（接收值）：
     import { defineProps } from "vue"
     defineProps({
		  msg: {
              default: '',
              value: String
		  }
	 })

子组件传值给父组件

子组件中
<button @click='test'>传值给父组件</button>

const { defineEmits } from "vue"
const emit = defineEmits(['giveFatherData'])
const test = () => {
	emit('giveFatherData', '要给父组件传的值')
}

父组件中：
<Child @giveFatherData='giveFatherData'></Child>
const giveFatherData = (val)=>{
	
}

mixin混入

新建mixin.js文件

export default function test() {
    let result = (val) => {
        switch (val) {
            case 0:
                return "初级"
            case 1:
                return "中级"
            case 2:
                return "高级"
        }
    }
    return {
        result
    }
}

组件内部使用

import mixin from "./mixin/Mixin.js"
const { result } = mixin()

直接使用这个方法即可

vue3定义全局变量

main.ts中

// ts中需要对 mitt 声明文件
declare module "@vue/runtime-core" {
    export interface ComponentCustomProperties{
        $Bus: typeof Mit,
        $dataStr: string
    }
}
app.config.globalProperties.$dataStr = "这是全局变量"

组件内部使用全局变量

import { ref, getCurrentInstance } from "vue"

const instance = getCurrentInstance()
const str = instance?.proxy
console.log(str!.$dataStr)

vue2 - defer 延迟装载

//  mixin中
let raf = null;
export default function(maxFrameCount) {
    return{
        data() {
            return{
                frameCount: 0
            }
        },

        mounted() {
            const refreshFrameCount = () => {
                raf = requestAnimationFrame(() =>{
                    this.frameCount++
                    if(this.frameCount < maxFrameCount) {  // maxFrameCount传进来的加载最大的组件个数，超过就停止请求动画帧了
                        refreshFrameCount()
                    }
                })
            }
            refreshFrameCount()
        },

		befordestory() {
			cancelAnimationFrame(raf)
		},

        methods:{
            defer(showInFrameCount) {
                return this.frameCount >= showInFrameCount  // showInFrameCount 表示在组件用的时候传进来  v-if='defer(showInFrameCount)'
            }
        }
    }
}

组件中使用

import defer from "引入上面的mixin块"
export default{
    mixins: [defer(21)]
}

// 在标签中
<div v-for="(item, index) in 21" :key="index">
      <Child v-if="defer(index)"></Child>
</div>