Vue3學習（八）

組件學習：

子組件：

<template>
  <div :title="msg">{{title}}</div>
  <div>{{cnData}}</div>
  <div>{{user}}</div>
</template>
  
<!-- <script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "over",
  setup() {
   
  },
  props: ["title", "data"],
});
</script> -->

<script lang="ts" setup>
import { ref } from 'vue';
//let title = ref("無敵的計算機")

//物件定義
let props = defineProps({
  title:{
    type: String,  //型別
    required: false, //是否必填
    default:"無敵的小強",
    validator:(v:string)=>v.length<=10,
  },
  msg: {
    type: String,  //型別
    required: false, //是否必填
    default:"無敵的小強",
    validator:(v:string)=>v.length<=10,
  },
  cnData: { type: Array },
  user: { type: Object },
});


</script> 

<!-- //ts定義
//  type PropType={
//     title?:string;
//     cntData?:number[];
//     user:object;
//   }

//定義屬性型別
//withDefaults(defineProps<PropType>(),{
  //title:"默認名稱",
  //cntData:()=>[9,10,11]
//})

//陣列定義
// let props=defineProps(["title","cntData","user"]);
// console.log(props); -->

父組件：

<template>
    <over msg="父傳子"
    :cnData="data"
    :user="{a:123,b:456}"
    >
    </over>
</template>

<script lang="ts" >
import { reactive, ref } from "vue";
import over from "../components/1103.vue";
export default {
    setup() {
        let data =reactive([1,2,3])
        return { data };
    },
    components: {
        over,
    },
};
</script>


<!-- <script lang="ts" setup>
import over from "../components/1103.vue";
let data = https://www.cnblogs.com/zsbb/archive/2022/11/11/new Date().toLocaleTimeString
-->

動態組件：

子組件：Section1 Section2 Section3

父組件：

<template>
    <input type="text" v-model="componentName">
    <!-- component動態組件 渲染那個組件受is影響 -->
    <component :is="components[componentName]" @onEmit="section2"></component>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Section1 from '../components/Section1.vue'
import Section2 from '../components/Section2.vue'
import Section3 from '../components/Section3.vue'

let componentName = ref("Section1");
let components = {
    "Section1":Section1, 
    "Section2":Section2,
    "Section3":Section3,
};
function section2(msgsection:any){
    componentName.value=msgsection
}
</script>

插槽學習：

子組件：

<template>
    <div class="bgc">
        <slot name="bgc"></slot>
    </div>
    <div class="bgc2">
        <div v-for="(u,i) in users">
            <slot name="bgc2" :data="u"></slot>
        </div>
    </div>
    <div class="bgc3">
        <slot name="bgc3" :data="array"></slot>
    </div>

    <!-- 動態插槽 -->
    <div class="bgc4">
        <slot name="bgc4"></slot>
    </div>

    <!-- 匿名插槽 -->
    <!-- <slot></slot>  定義插槽，父容器中使用該組件時，
        在該組件放的內容都會丟到子組件匿名插槽中 -->
    <slot :data="array"></slot>
</template>

<script lang="ts" setup>import { reactive, ref } from 'vue';

let n = ref(100)

//子組件暴露給資料給父組件
defineExpose({ n, a: 200, c: 1000 })
let array=[1,2,3,4,5,6,7,8]
let users=reactive([
    {id:1,name:123},{id:2,name:234},
    {id:3,name:345},{id:4,name:456}
])
type User={
    id:number;
    name:string;
}


</script>

<style scoped>
.bgc {
    height: 40px;
    background-color: antiquewhite;
}

.bgc2 {
    height: 240px;
    background-color: lightcyan;
}

.bgc3 {
    height: 40px;
    background-color: lightseagreen;
}

.bgc4 {
    height: 40px;
    background-color: lightsalmon;
}
</style>

父組件：

<template>
    <demo ref="demo3">
        <!-- v-slot只能用于組件或＜template＞標記 -->
        <!-- <h2 v-slot:bgc></h2> 報錯！！！ -->
        
        <!-- 插槽不能重復名稱 -->
        <!-- <template v-slot:bgc></template> 報錯！！！-->

        <!-- #bgc1是v-slot:bgc1的簡寫 -->
        <template #bgc1>
            具名插槽
        </template>

       <template v-slot:bgc2="{data}">
            簡寫具名插槽,{{data}}
        </template>

        <template v-slot:bgc3="{data}">
            具名插槽,{{data}}
        </template>

        <template  #[refs]>
            動態插槽
        </template>


        <!-- 匿名插槽 -->
    <template v-slot="{data}">匿名插槽,{{data}}</template>
    </demo>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import demo from '../components/1104_2.vue'

let demo3=ref<{a:number,c:number}>()

let refs=ref("bgc4")

onMounted(()=>{
    console.log(demo3.value?.a)
})

//在setup中并不能直接訪問子組件暴露的成員
</script>

<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>

本文來自博客園，作者：最帥爸爸，轉載請注明原文鏈接：https://www.cnblogs.com/zsbb

標籤：其他

上一篇：回圈練習

下一篇：從0搭建vue3組件庫: Input組件