Vue3学习（八）

<template>
    <div class="son">
        <h2>这是孙子组件</h2>
        <h2>父组件传递过来的数据{{n}}</h2>
        <button @click="n++" class="btncss">n++</button>
        <button @click="btn=!btn" class="btncss">{{btn==true ? "关闭对话框" : "弹出对话框"}}</button>
    </div>
    <!-- teleport 见将容器中的东西传送到指定位置 to -->
    <teleport to="body">
        <template v-if="btn==true">
            <div id="body_box">
                <div class="body_item">
                    <div @click="btn=false" id="body_item_text">x</div>
                    <h3 style="text-align:center">内容</h3>
                    <h4 style="text-align:center">Hello Vue3 teleprot</h4>
                </div>
            </div>
        </template>
    </teleport>
</template>
<script lang="ts" setup>
import { inject, ref } from 'vue';
let n=inject("n");
let btn=ref(false)
</script>
<style scoped>
.son{
    padding: 20px;
    background: lightcoral;
}
#body_box{
    width: 100%;
    height: 100%;
    position:absolute;
    overflow-x: hidden;
    top:0px;
    background: rgb(9,9,9,0.5);
}
.body_item{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 400px;
    width: 300px;
    background: #fff;
}
#body_item_text{
    text-align: right;
    cursor: pointer;
    font-size: 20px;
    margin: 12px 22px 0 10px;
}
</style>

<template>
    <div class="child">
        <h2>这是子组件</h2>
        <son></son>
    </div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'//定义异步组件
const son=defineAsyncComponent(()=> import ('../components/son.vue'))//异步加载组件
//import son from '../components/son.vue'//同步加载组件
</script>
<style scoped>
.child{
    padding: 20px;
    background: lightgreen;
}
</style>

<template>
    <div class="father">
        <h2>这是父组件</h2>
        <h2>父组件的数据{{n}}</h2>
        <!-- Suspense等待异步组件时渲染一些额外内容，让应用有更好的用户体验 -->
        <Suspense>
            <template v-slot:default>
                <child></child>
            </template>
            <template v-slot:fallback>
                <h2>子组件加载中</h2>
            </template>
        </Suspense>
    </div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, provide, ref, Suspense } from 'vue'//定义异步组件
const child=defineAsyncComponent(()=> import ('../components/child.vue'))//异步加载组件
//import child from '../components/child.vue'//同步加载组件

let n=ref(100);
provide("n",n)
</script>
<style scoped>
.father{
    padding: 20px;
    background: lightseagreen;
}
</style>

<template>
    <div class="bgk">
        <h3>组件一</h3>
    </div>
</template>
<script lang="ts">
import { defineComponent, onActivated, onDeactivated, onMounted, ref } from 'vue';
export default defineComponent({
  name: "keep1", //名称
  setup() { 
  },
});
//初始渲染
onMounted(()=>{
    console.log("渲染了组件一")
})
//组件不是重新渲染时激活时调用的方法
onActivated(()=>{
    console.log("激活了组件一的方法！")
})
//组件消失后调用的方法
onDeactivated(()=>{
    console.log("组件消失了")
})
</script>
<style scoped>
.bgk{
    padding: 20px;
    background: lightcyan;
}
</style>

<template>
    <div class="bgk">
        <h3>组件二</h3>
    </div>
</template>
<script lang="ts" >
import { defineComponent, onActivated, onDeactivated, onMounted, ref } from 'vue';
export default defineComponent({
  name: "keep2", //名称
  setup() { 
  },
});
//初始渲染
onMounted(()=>{
    console.log("渲染了组件二")
})
</script>
<style scoped>
.bgk{
    padding: 20px;
    background: lemonchiffon;
}
</style>

<template>
    <div class="bgk">
        <h3>组件三</h3>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
export default defineComponent({
  name: "keep3", //名称
  setup() { 
  },
});
//初始渲染
onMounted(()=>{
    console.log("渲染了组件三")
})
</script>
<style scoped>
.bgk{
    padding: 20px;
    background: lightsalmon;
}
</style>

<template>
    <!-- 把调用过的组件存在缓存中，下次在调用相同组件就不用再次重新渲染 -->
    <!-- include 只缓存指定的组件 -->
    <!-- exclude 对指定的组件不进行缓存 -->
    <!-- :max指定缓存的上限 -->
    <KeepAlive :max="1">
        <component :is="components[componentName]"></component>
    </KeepAlive>
    <input type="text" v-model="componentName">
</template>
<script lang="ts">
import { ref } from 'vue';
import keep1 from '../components/keep_1.vue'
import keep2 from '../components/keep_2.vue'
import keep3 from '../components/keep_3.vue'
export default ({
    setup() {
        let componentName = ref();
        let components = {
            "keep1": keep1,
            "keep2": keep2,
            "keep3": keep3,
        }
        return { componentName,components}
    },
    components: { keep1, keep2, keep3 }
})
</script>
<style scoped>
</style>