vue3 父传子

父组件

<template>
    <time-picker-select :allTotal="allTotal" />
</template>
<script setup>
    import { ref } from 'vue'
    const allTotal = ref(0)
</script>

子组件

<script setup>
    import { defineProps } from 'vue'
    const props = defineProps({
      allTotal: {
        type: String, 
        default: ''
      },
    })
</script>

vue3 子传父

父组件

<template>
    <question-table @getQuestionTableTotal="getQuestionTableTotal" />
</template>
<script setup>
    function getQuestionTableTotal(val) {
      console.log(val, 'getQuestionTableNum');
    }
</script>

子组件

<script setup>
    const emit = defineEmits(['getQuestionTableTotal'])
    emit('getQuestionTableTotal',100)
</script>

vue3 父组件调用子组件方法

父组件

<template>
    <details-page  ref="detailsPageRef" />
</template>
<script setup>
    import { ref } from 'vue'
    const detailsPageRef = ref(null)
    function clickMenus() {
        detailsPageRef?.value.getQueryList()
    }
</script>

子组件

<script setup>
    function getQueryList() {
      console.log('这是子组件方法');
    }
    defineExpose({
      getQueryList
    })

</script>

vue3 子组件调用父组件方法

父组件

<script setup>
    function updataPage() {
      console.log('这是父组件方法');
    }
</script>

子组件

<script setup>
    const emit = defineEmits(['updataPage'])
    function handleSelect() {
      setTimeType()
      emit('updataPage')
    }
</script>

vue3 监听

<script setup>
    import { watch } from "vue";
    watch(() => props.modelValue,(val) => {
        console.log(val);
    },{
        immediate: true,
        deep: true,
    });
</script>

vue3 计算

<script setup>
    const getCountyTableNum = ref(0)
    const getMarketTableNum = ref(0)
    const getQuestionTableNum = ref(0)
    
    function getCountyTableTotal(val) {
      getCountyTableNum.value = val
    }
    function getMarketTableTotal(val) {
      getMarketTableNum.value = val
    }
    function getQuestionTableTotal(val) {
      getQuestionTableNum.value = val
    }
    
    const allTotal = computed(() => {
      return getCountyTableNum.value * 1 + getMarketTableNum.value * 1 + getQuestionTableNum.value * 1
    })
</script>

vue3 计算(带参数)

{{ referenceListData(chatItem.answer.referenceList) }}
<script setup>
  const referenceListData = computed(() => {
  return (val: any) => {
    const list: any[] = []
    val.forEach((it: any, i: number) => {
      it.refSlices.forEach((item: any, index: number) => {
        list.push({
          ...it,
          refSlicesCopy: item,
        })
      })
    })
    list.forEach((it: any, i: number) => {
      it.refSlices = [it.refSlicesCopy]
      delete it.refSlicesCopy
    })
    return list
  }
})
</script>

vue3 生命周期

<script setup>
    import { onMounted } from 'vue'
    onMounted(() => {
      getCrossData()
      getCrossAnalysisAll()
    })
</script>

vue3 路由跳转

跳转页

<script setup>
    import { useRouter } from 'vue-router'
    const route = useRouter()
    function handleDetail(row) {
      route.push({
        name: 'county',
        query: {
          isShow: false,
        }
      })
    }
</script>

目标页

<script setup>
    import { useRouter } from 'vue-router'
    const route = useRouter()
    console.log(route.currentRoute.value.query);
</script>

补充

import { useRoute, useRouter } from 'vue-router'
const $router = useRouter()
const route = useRoute()

模拟Promise返回数据

 return new Promise((resole)=>{
    resole({
      "code": "00000",
      "data": [
        {
          "birthday": "2016-03-01",
          "gender": 1,
          "id": "487174193310613268",
          "joinDate": "2023-08-03",
          "mobile": "17610112111",
          "name": "张无忌",
          "points": null,
          "profilePath": "2023/08/04/ee6d94de-3d1b-420b-afc0-59c41fffc49b.jpg",
          "school": "集宁一中",
          "schoolId": "471582927302755538",
          "status": 0
        },
        {
          "birthday": "2016-03-01",
          "gender": 1,
          "id": "487174193310613268",
          "joinDate": "2023-08-03",
          "mobile": "17610112111",
          "name": "张无忌1",
          "points": null,
          "profilePath": "2023/08/04/ee6d94de-3d1b-420b-afc0-59c41fffc49b.jpg",
          "school": "集宁一中1",
          "schoolId": "471582927302755538",
          "status": 0
        },
      ],
      "message": "SUCCESS",
      "page": {
        "pageNum": 1,
        "pageSize": 10,
        "pages": 1,
        "total": 1
      },
      "traceId": "ae62dfd3eb505861"
    })
  })

:class

:class="[  
  'chat__input__extend',
  inputType === 'extend'? '' : 'chat__input__extend--small'
]"

//isPath 类名  冒号后边是判断条件
:class="{isPath: nowPath==m.path }"

:style

<span
    :style="{
      display: 'inline-block',
      width: '10px',
      height: '10px',
      backgroundColor: getColor(scope),
      borderRadius: '50%',
      marginRight: '8px'
    }"
></span>