vue3 子组件传值父组件，组件传值

函数方式

//fater.vue
<div class="father">
    <children :carr="fatherFun" />
 </div> 
 <script setup lang="ts"> 
 import children from './children.vue'
const fatherFun = (n: number) => {
  console.log('父组件函数,接收到子组件的值为：', n)
  }

子组件

//children.vue
 <div class="children">
    <div @click="onUp(3)">carr:</div>
  </div>
  <script setup lang="ts"> 
  const props = defineProps({
  carr: {
    type: Function,
    required: true
  }})

function onUp(n: number) {
  console.log('子组件函数')
  props.carr(n)}/*
结果为：
子组件函数
父组件函数,接收到子组件的值为： 3
*/

emit方式

父页面

//father.vue
<div class="father">
    <children :carr="arr" @getChildren="oncFun" />
</div>
    
<script setup>
import children from './children.vue'
const arr = [1, 3, 5]

function oncFun(x: number) {
  console.log('父组件函数,接收到子组件的值为:', x)}
 }

子组件

//children.vue

<div class="children">
    <div @click="onUp(3)">carr:</div>
  </div>

<script setup lang="ts">

const props = defineProps({
  carr: {
    type: Array,
    required: true
  }})

//setup中使用emits,需要先声明，定义属性数量
const emits = defineEmits(['getChildren'])
function onUp(n: number) {
  console.log('子组件函数')
  emits('getChildren', n)
}