vue3 setup语法糖 组件传值学习笔记

父传子

父组件：

<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <CommonAside title="传值" :data="list"/>
            </el-aside>
        </el-container>
    </div>
</template>

<script setup lang="ts">
    import CommonAside from '../components/CommonAside.vue'
    const list: number[] = [1, 2, 3, 4, 5]
</script>

子组件：CommonAside

<template>
    <div>
        {{ title }}
        {{ data }}
    </div>
</template>

<script setup lang="ts">
type Props = {
    title: string,
    data: number[]
}
defineProps<Props>()
</script>

子传父

子组件：CommonHeader 

<template>
    <button @click="sendData">子传父</button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const list = reactive<number[]>([6, 6, 6])
const emit = defineEmits(['gdhsgsds'])
const sendData = () => {
    emit('gdhsgsds', list)
}
</script>

父组件：

<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <CommonHeader @gdhsgsds="getData" />
            </el-header>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import CommonHeader from '../components/CommonHeader.vue'
const getData = (list: number[]) => {
    console.log(list);
}
</script>