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