vue3 setup方法

setup 組合式API ----------官方定義：通過創建 Vue 組件，我們可以將界面中重複的部分連同其功能一起提取爲可重用的代碼段。僅此一項就可以使我們的應用在可維護性和靈活性方面走得相當遠。然而，我們的經驗已經證明，光靠這一點可能並不夠，尤其是當你的應用變得非常大的時候——想想幾百個組件。處理這樣的大型應用時，共享和重用代碼變得尤爲重要。

setup 選項是一個接收 props 和 context 的函數。此外，setup 返回的所有內容都暴露給組件的其餘部分 (計算屬性、方法、生命週期鉤子等等) 以及組件的模板。

<script lang="ts">
    export default { // vue3.0寫法
        name: 'Home',
        setup (props, context) {
            console.log(props, context);
            const name = '1111'
            return {
                name
            }
        }
    }
</script>
​
<script setup lang="ts"> // vue3.2寫法，最新寫法
    import { ref, reactive } from 'vue'
    const name = ref('1') // 響應式數據
    const name1 = ref([]) // 這也是響應式數據，官方的意思是數組和對象有變化後能自動響應，但是我實際使用ref也是一樣可以響應
</script>

​

子組件接收參數

    const props = defineProps({
        // 寫法一
        msg2: String
        // 寫法二
        msg2:{
            type:String,
            default:""
        }
    })

子組件傳遞參數回父組件

    // defineEmits 這個不需要引入，3.0版本沒試過，用的是3.2版本
    const emit = defineEmits(["myClick","myClick2"])
    // 對應寫法二
    const handleClick = ()=>{
        emit("myClick", "這是發送給父組件的信息")
    }

 

此文章借鑑了這位大佬的文章 https://juejin.cn/post/6999687348120190983