如何为Vue组件的foo和greetingMessage属性赋值？

你在App.vue里定义的foo和greetingMessage是组件的props，props用于父组件向子组件传递数据，根据App组件的使用场景，有两种赋值方式：

场景1：App作为子组件被其他组件引用 #

如果App组件是被另一个父组件（比如Parent.vue）引入使用，直接在父组件的模板中通过属性传递值即可：

父组件（Parent.vue）代码示例： #

<template>
  <!-- 使用kebab-case对应props中的camelCase -->
  <App foo="我是foo的值" greeting-message="欢迎使用Vue！" />
</template>

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

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

场景2：App是根组件（直接挂载到页面） #

如果App是项目的根组件（通过main.js挂载到页面的#app元素），可以在创建Vue应用时直接传递props：

main.js代码示例： #

import { createApp } from 'vue'
import App from './App.vue'

// 方式1：通过createApp的第二个参数传递props
createApp(App, {
  foo: '根组件传递的foo值',
  greetingMessage: 'Hello 根组件！'
}).mount('#app')

// 方式2：通过mount方法的第二个参数传递
// createApp(App).mount('#app', {
//   foo: '另一种方式传递的foo',
//   greetingMessage: 'Hi 根组件！'
// })

关键注意点 #

1. 模板访问修正：你的App.vue模板中写的{{ greetingMessage }}无法直接获取props值，因为setup返回的是props对象。可以修改模板为{{ props.greetingMessage }}，或者在setup中解构返回：

setup(props) {
  console.log("props:",props)
  console.log("props.foo:",props.foo)
  console.log("props.greetingMessage:",props.greetingMessage)
  // 解构props返回，让模板可以直接访问
  return {
    foo: props.foo,
    greetingMessage: props.greetingMessage
  }
}

2. props命名规范：模板中传递props时，Vue会自动将kebab-case（短横线分隔）转换为camelCase（驼峰式），所以greeting-message对应组件中的greetingMessage。
3. props只读限制：props是单向数据流，子组件不能直接修改props的值。如果需要修改，可在组件内部定义响应式变量接收props值：

import { ref } from 'vue'

setup(props) {
  const localGreeting = ref(props.greetingMessage)
  // 后续可修改localGreeting，不会影响父组件
  return { localGreeting }
}

4. 设置默认值：如果希望props未被传递时使用默认值，可修改props定义：

props: {
  foo: {
    type: String,
    default: '默认foo值'
  },
  greetingMessage: {
    type: String,
    default: '默认问候语'
  }
}

内容的提问来源于stack exchange，提问作者Amrmsmb