VUE3之Composition API（一）

setup

setup的两个参数：props和context

组件定义props的方式与之前相同。setup中要是想使用props，直接使用第一个传入的参数，而不能使用this来获取。

context包含三个属性：attrs、slots、emit

<script>
    export default {
        props:{
            message:{
                type:String,
                require:true
            }
        },
        /**
         * 参数一:props,父组件传递过来属性
         * 参数二:context,包含三个属性:attrs slots emit
         */
        // setup(props, context) {
        //     console.log(props.message);
        //     console.log(context.attrs.id,context.attrs.class);
        //     console.log(context.slots);
        //     console.log(context.emit);
        // }
        // 解构
        setup(props, {attrs,slots,emit}) {
            console.log(props.message);
            console.log(attrs.id,attrs.class);
            console.log(slots);
            console.log(emit);
        }
    }
</script>

setup方法可以有返回值，返回值是一个对象，类似于原先options中的data：

<template>
    <div>
        home page
        <h2>{{message}}</h2>

        <h2>{{title}}</h2>
        <h2>当前计数: {{counter}}</h2>
        <button @click="increment">+1</button>
    </div>
</template>

<script>
    export default {
        props:{
            message:{
                type:String,
                require:true
            }
        },
        setup() {
            let counter=100;
            // 局部函数
            const increment=()=>{
                counter++;
                console.log("button click");
            }
            return {
                title:"hello home",
                counter,
                increment
            }
        }
    }
</script>

但是这里定义的counter不具有响应式，setup中的局部函数不能改变界面。