vue3写法

一. <script setup>

1. 引入组件

import Head from "./conponents/head.vue"

2. 声明变量

// 引入 ref
import { ref } from 'vue'
const isNeedNav = ref(true)

3. 声明方法

const changeLossd = () => {
    lossdVisible.value = !lossdVisible.value
}

4.生命钩子函数

onBeforeMount(() => {})
onMounted(() => {})
onBeforeUpdate(() => {})
onUpdated(() => {})
onBeforeUnmount(() => {})
onUnmounted(() => {})

5.父传子参数

父：

<Body :twentyFour="twentyFour"></Body>

子：

const porps = defineProps({
    twentyFour: String,
})

JS 中取值：

porps.twentyFour

HTML 中取值：

{{ twentyFour }}

6.父传子方法

父：

 <Body @changeInYear="changeInYear" ></Body>

子：

const emit = defineEmits(['changeInYear']); //声明emit
emit('changeInYear')

7.watch监听

import { watch } from 'vue'

watch(() => chooseNow.value, () => {
    
})

8.css深度监听

:deep(.el-table tr) {
    background: transparent;
}

二. export default

1. 引入组件

import switchRoom from './switchRoom.vue'
export default {
    components: { electricityLoss, switchRoom },
}

2. 声明变量

import { ref } from 'vue'
export default {
    setup(props, contont) {
        const chooseNow = ref("用电损耗")

        return {
            chooseNow,
        }
    }
}

3. 声明方法

export default {
    setup(props, contont) {
        const changeCom = (name) => {
            chooseNow.value = name
        }
        return {
            changeCom,
        }
    }
}

4.生命钩子函数

import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from 'vue'
onBeforeMount(() => {})
onMounted(() => {})
onBeforeUpdate(() => {})
onUpdated(() => {})
onBeforeUnmount(() => {})
onUnmounted(() => {})

5.父传子参数

父：

<inYearDialog :inYearVisible="inYearVisible" :title='title'></inYearDialog>

子：

props: {
    inYearVisible: Boolean,
    title: String
},

JS 中取值:

setup(props, contont) {
        onMounted(() => {
            consoloe.log(props.inYearVisible)
        })
}

HTML 中取值：

{{ inYearVisible }}