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 = new Date().toLocaleTimeString
</script
-->

 

动态组件:

子组件: 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 >

 

teleport,Suspense,异步组件学习
子组件:
 
son.vue
  <  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 >

 

 

child.vue
  <  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

标签: Javascript

添加新评论