v3 中的父子传参

第一种非语法糖格式：

<div>

        parent父组件

    {{ msg }}

        <mycom1 :msg="msg" a="1" b="2" c="3" d="4" @addd="addd"></mycom1>

    </div>

</template>

<script>

import mycom1 from "@/components/mycom1.vue";

import { ref } from "vue";

// 非语法糖的格式写

export default {

    components: {

        mycom1,

    },

    setup() {

        const  msg = ref(12);

        const addd = () => {

            msg.value++;

        }

        // return 返回出去,注意这里只能写一个return

        return {

                msg,

                addd

            }

    },

};

子组件

<template>

    <div>

        子组件

        <h3>{{ a }}--{{ b }}--{{ msg }}</h3>

        <!-- 添加事件 -->

        <button @click="add">添加</button>

    </div>

</template>

<script>

// 非语法糖结构的书写

export default {

    props: ['msg', 'a', 'b'],

    // setup中有两个参数，分别是props，context

    // props表示传过来的数据，打印的是 Proxy(Object)

    // context表示一个上下文对象

    // context中有四个属性，分别是attrs,slots,emit,expose

    // attrs表示的是父组件传递过来的props,

    // slots表示的是父组件传递过来的插槽

    // emit表示的是触发自定义事件

    setup(props, context) {

        console.log(props)

        console.log(context)

        //父传子点击添加父组件中的数据

        const add = () => {

            context.emit('addd')

        }

        // return 返回

        return { add }

    },

}

</script>

<style lang="scss" scoped></style>

第二种语法糖格式父子传参：