vue Props

简介: vue Props

Props 声明

一个组件需要显式声明它所接受的 props,这样 Vue 才能知道外部传入的哪些是 props,哪些是透传 attribute

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

<script setup>
const props = defineProps(['foo'])
console.log(props.foo)
</script>

在没有使用 <script setup> 的组件中,prop 可以使用 props 选项来声明:

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

注意传递给 defineProps() 的参数和提供给 props 选项的值是相同的,两种声明方式背后其实使用的都是 prop 选项。

除了使用字符串数组来声明 prop 外,还可以使用对象的形式:

// 使用 <script setup>
defineProps({
  title: String,
  likes: Number
})
// 非 <script setup>
export default {
  props: {
    title: String,
    likes: Number
  }
}

对于以对象形式声明的每个属性,key 是 prop 的名称,而值则是该 prop 预期类型的构造函数。比如,如果要求一个 prop 的值是 number 类型,则可使用 Number 构造函数作为其声明的值。

对象形式的 props 声明不仅可以一定程度上作为组件的文档,而且如果其他开发者在使用你的组件时传递了错误的类型,也会在浏览器控制台中抛出警告。我们将在本章节稍后进一步讨论有关 prop 校验的更多细节。

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

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

传递 prop 的细节

Prop 名字格式

如果一个 prop 的名字很长,应使用 camelCase 形式,因为它们是合法的 JavaScript 标识符,可以直接在模板的表达式中使用,也可以避免在作为属性 key 名时必须加上引号。

defineProps({
  greetingMessage: String
})
<span>{{ greetingMessage }}</span>

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

<MyComponent greeting-message="hello" />

对于组件名我们推荐使用 PascalCase,因为这提高了模板的可读性,能帮助我们区分 Vue 组件和原生 HTML 元素。然而对于传递 props 来说,使用 camelCase 并没有太多优势,因此我们推荐更贴近 HTML 的书写风格。

相关文章
|
1天前
|
JavaScript 前端开发 Java
开发语言漫谈-Vue
Vue严格说来不是一门语言
|
2天前
|
JavaScript 前端开发 C++
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
13 2
|
4天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
14 3
|
4天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
13 1
|
5天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1
|
5天前
|
JavaScript
Vue父子组件传值
<!-- 父组件向子组件传地值 -->
15 2
|
5天前
|
JavaScript Java
Vue : v-if, v-show
Vue : v-if, v-show
13 0
Vue : v-if, v-show
|
5天前
|
JavaScript 前端开发
Vue : 监视属性
Vue : 监视属性
9 0
|
5天前
|
缓存 JavaScript
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
22 2
|
5天前
|
JavaScript 安全
一文彻底学会vue的组件通信
Vue组件通信包括父向子通过`props`传递数据,如`&lt;Student :name=&quot;18&quot;&gt;&lt;/Student&gt;`,子组件通过`$emit`触发自定义事件与父组件通信,如`this.$emit(&#39;myEvent&#39;, this.name)`。此外,使用全局事件总线(`Vue.prototype.$bus`)可在多级组件间通信,通过`$on`订阅和`$emit`发布事件。还有消息订阅与发布模式,利用`pubsub-js`库实现更灵活的组件交互。
15 0
一文彻底学会vue的组件通信