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