Vue3 父子组件传参

父子组件传参

• 父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值
• 子组件给父组件传参是通过defineEmits派发一个事件, 父组件调用注册的事件 然后传递参数

父组件代码

<template>
  <div>
    <PageData :num="num" name="传给子组件的值" @getPageData="getPageData"></PageData>
  </div>
</template>

<script setup lang="ts">
import PageData from './pages/page.vue'
import { reactive } from 'vue'

const num  = reactive<number[]>([1,2,3]) // 传递给子组件

const getPageData = (list:string[]) => {
  console.log('子组件传递过来的值', list)
}

</script>

<style scoped>

</style>

子组件代码

<template>
    <div>
       子组件： {{name}}
       <div v-for="(item, index) in num" :key="index">{{item}}</div>

        <button @click="setPageData">向父组件传递</button>

    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const list = reactive<string[]>(['1','2','3','4'])

// js

// defineProps({
//     name:String
// })

// ts
type Props = {
    name:string,
    num:number[]
}

// 通过defineProps 来接收父组件传递的值
defineProps<Props>()

// 通过defineEmits派发事件
const emit = defineEmits(['getPageData']) // const emit = defineEmits(['getPageData', 'getPageData1'])

const setPageData = () => {
    emit('getPageData', list) // 传递多个值 emit('getPageData', list, 1, 3)
}

</script>

<style scoped>

</style>