vue3.0语法糖组件

1.vue3.0单文件组件常规的写法

父组件

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import aa from './pages/aa.vue'
</script>

<template>
    <div>
        <aa newname="你好吗" />
    </div>
</template>

子组件

<template>
    <div>
        <div>这知识一个常规的文件写法</div>
        <p>{{ czlove.name }}</p>
        <p>{{ newname }}</p>
        <p>{{ czlove.age }}</p>
        <p><span @click="addage">增加点击</span></p>
    </div>
</template>

<script lang="ts">
import { onMounted, reactive } from 'vue'
export default {
    props: {
        newname: {
            type: String
        }
    },
    setup() {
        const czlove = reactive<{ name: string; age: number }>({
            name: 'czklove',
            age: 19
        })
        onMounted(() => {
            console.log('aaaa')
        })
        let addage = () => {
            czlove.age++
        }
        return { czlove, addage }
    }
}
</script>

模板上会提示找不到定义的名称

生命周期

import { onMounted } from 'vue'

setup() {
        onMounted(() => {
            console.log('aaaa')
        })
    }

props

 props: {
        newname: {
            type: String
        }
    },

自定义事件

<script setup lang="ts">
import aa from './pages/aa.vue'

const clickBtn = () => {
    console.log('33333')
}
</script>

<template>
    <div>
        <aa newname="你好吗" @click="clickBtn" />
    </div>
</template>

<template>
    <div>
        <div>这知识一个常规的文件写法</div>
        <p>{{ czlove.name }} {{ czlove.age }}</p>
        <p><span @click="addage">增加点击</span></p>
    </div>
</template>

<script lang="ts">
import { onMounted, reactive } from 'vue'
export default {
    props: {
        newname: {
            type: String
        }
    },
    emits: ['childclick'],
    setup(props, context) {
        const czlove = reactive<{ name: string; age: number }>({
            name: 'czklove',
            age: 19
        })
        onMounted(() => {
            console.log('aaaa')
        })
        let addage = () => {
            context.emit('childclick')
            czlove.age++
        }
        return { czlove, addage }
    }
}

2.语法糖单文件组件

生命周期

<script setup lang="ts">
const obj = reactive<Objtype>({
    name: 'czklve',
    list: {}
})
</script>
<template>
    <div>
        <p>{{ obj.name }}</p>
    </div>
</template>

props

<script setup lang="ts">
import { defineProps } from 'vue'
let props = defineProps<{ old: string }>()
</script>
<template>
    <div>
        <p>{{ props.old }}</p>
    </div>
</template>

自定义事件

<script setup lang="ts">
import { reactive, onMounted, defineProps, defineEmits } from 'vue'
import { baseRequest } from '../../api/index'
let props = defineProps<{ old: string }>()
let changeOldValue = defineEmits(['changeold'])
type Objtype = {
    name: string
    list: MulistType
}
const obj = reactive<Objtype>({
    name: 'czklve',
    list: {}
})
onMounted(() => {
    console.log('666666)
})
const clickBtn = (e) => {
    changeOldValue('changeold', e)
}
</script>
<template>
    <div>
        <p>{{ props.old }}</p>
        <button @click="clickBtn('66')">点击了</button>
    </div>
</template>