vue3 js方式 props 传值

在Vue3中，可以使用`defineProps`函数来定义组件的props属性，然后在组件中使用这些props属性。下面是一个简单的例子：

在子组件中，使用`defineProps`函数来定义props属性：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue'

export default {
  props: defineProps({
    title: String,
    content: String
  })
}
</script>

在父组件中，使用`v-bind`指令来传递props属性：

<template>
  <div>
    <h1>My Blog</h1>
    <<BlogPost title="My First Post" content="Hello, world!" />
  </div>
</template>

<script>
import BlogPost from './BlogPost.vue'

export default {
  components: {
    BlogPost
  }
}
</script>

在上面的例子中，我们定义了一个`BlogPost`组件，并在父组件中使用`v-bind`指令来传递`title`和`content`属性。在子组件中，我们使用`defineProps`函数来定义这些属性，并在模板中使用它们。