vue3中props传入和传出

props是Vue中用于父子组件传递数据的一种机制。在Vue3中，props的传入和传出方式如下：

1. 传入方式：在子组件中使用props选项来接收父组件传递的数据。

// 子组件中
props: {
  title: String,
  count: {
    type: Number,
    default: 0
  }
}

父组件中使用子组件时，可以通过v-bind指令将数据传递给子组件的props。

<!-- 父组件中 -->
<template>
  <child-component :title="title" :count="count"></child-component>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello Vue',
        count: 10
      }
    }
  }
</script>

2. 传出方式：在子组件中使用$emit方法触发一个自定义事件，并传递数据给父组件。

// 子组件中
methods: {
  handleClick() {
    this.$emit('update:title', 'New Title')
  }
}

父组件中可以监听子组件触发的自定义事件，并在事件处理函数中获取子组件传递的数据。

<!-- 父组件中 -->
<template>
  <child-component :title="title" @update:title="updateTitle"></child-component>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello Vue'
      }
    },
    methods: {
      updateTitle(newTitle) {
        this.title = newTitle
      }
    }
  }
</script>