Vue3 从入门到放弃 （第四篇.Props使用）

我们接着上节文章 (Vue3 从入门到放弃 （第三篇.组件的使用）_Meta.Qing的博客-优快云博客)

我们来实现props使用和注意事项.

Props 声明

在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明

1.字符串数组来声明 props

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

2.对象实现props

// 使用 <script setup>
defineProps({
  title: String,   //类型可以为String,Number,Function,Array,Boolean,Object
  likes: Number    
})

如果你正在搭配 TypeScript 使用 <script setup>，也可以使用类型标注来声明 props：

<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>

3 .使用 camelCase 形式，因为它们是合法的 JavaScript 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号

defineProps({
  greetingMessage: String
})

<span>{{ greetingMessage }}</span>

虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 DOM 模板时例外)，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式：

<MyComponent greeting-message="hello" />

静态 vs. 动态 Prop

至此，你已经见过了很多像这样的静态值形式的 props：

<BlogPost title="My journey with Vue" />

应地，还有使用 v-bind 或缩写 : 来进行动态绑定的 props：

<!-- 根据一个变量的值动态传入 -->
<BlogPost :title="post.title" />

<!-- 根据一个更复杂表达式的值动态传入 -->
<BlogPost :title="post.title + ' by ' + post.author.name" />

 继续上节例子:

<script setup>
// 声明一个props，默认值为default
defineProps({
  titleHeader: {
    type: String,
    default: 'Meta.Qing'
  }
})

</script>

<template>
  <!-- 定义一个头部组件 -->
  <div class="meta-header">
    <!-- 左侧logo -->
    <div class="meta-header-logo">{{ titleHeader }} LOGO</div>
    <nav>
      <!-- 右侧导航栏 -->
      <a href="/HTML/">HTML</a> | <a href="/css/">CSS</a> |
      <a href="/JavaScript/">JavaScript</a> | <a href="/jQuery/">jQuery</a> |
      <a href="/Vue3/">Vue3</a> | <a href="/React/">React</a> |
      <a href="/Angular/">Angular</a>
    </nav>
  </div>
</template>

<style scoped>
/* 弹性盒子方式来布局 */
.meta-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  background: #1fd6e766;
  padding: 10px;
}
.meta-header-logo {
  font-weight: bold;
  color: rgba(28, 29, 31, 0.804);
}
</style>

打开 http://127.0.0.1:5173/#/