Vue基础学习之---通过 Prop 向子组件传递数据

深藏阁楼爱情的钟 2022-05-18 02:08 307阅读 0赞

### 一、Prop 的大小写 (camelCase vs kebab-case) ###

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
      // 在 JavaScript 中是 camelCase 的
      props: ['postTitle'],
      template: '<h3>{
       { postTitle }}</h3>'
    })

<blog-post post-title="hello!"></blog-post>

重申一次，如果你使用字符串模板，那么这个限制就不存在了。

### Prop 类型 ###

到这里，我们只看到了以字符串数组形式列出的 prop：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

props: {
      title: String,
      likes: Number,
      isPublished: Boolean,
      commentIds: Array,
      author: Object
    }

这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。你会在这个页面接下来的部分看到[类型检查和其它 prop 验证][prop]。但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

[prop]: https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81

发表评论取消回复

表情：

评论列表（有 0 条评论，307人围观）

还没有评论，来说两句吧...

相关阅读

相关父组件向子组件传递数据

既然存在父子关系，所以，肯定是在父组件中调用了子组件。而父组件向子组件传递的数据，可以通过在子组件上定义属性，将数据传递给自定义属性的值的方式，来实现父组件向子组件传递数据

太过爱你忘了你带给我的痛/ 2023年08月17日 17:09/ 0 赞/ 278 阅读

相关 VUE父组件向子组件传递数据

在使用VUE开发的时候，有时候，我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生，从而导致代码冗余，所以，我们可以把同一个模块下的所有子组

秒速五厘米/ 2023年03月02日 15:57/ 0 赞/ 154 阅读

相关 vue:通过Prop向子组件传递数据的两种方法使用对比

使用props来接受父组件传递的属性、数据 props定义的方式有两种，一种是数组，一种是对象。数组方式： props: ['title'] 使用数组定义无法

缺乏、安全感/ 2023年02月09日 13:16/ 0 赞/ 93 阅读

相关父组件向子组件传递数据(vue.js)

父组件: app.vue 子组件: header.vue 子组件: <template> <div> <!-- logo 是在

深藏阁楼爱情的钟/ 2022年06月13日 09:11/ 0 赞/ 401 阅读

相关 Vue2 框架整理：组件props，父组件向子组件传递数据，单向数据流

![这里写图片描述][70] vue的组件除了要把模板内的内容进行复用外，更重要的是组件间要进行通信。父组件向子组件传递数据：通常子组件会通过父组件传递来的数据或参数

谁借莪１个温暖的怀抱￠/ 2022年05月22日 09:10/ 0 赞/ 531 阅读

相关 Vue基础学习之---通过 Prop 向子组件传递数据

一、Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使

深藏阁楼爱情的钟/ 2022年05月18日 02:08/ 0 赞/ 308 阅读

相关【Vue】10.vue中父组件通过props属性向子组件传值

在vue项目开发的过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来，这时可能会产生一些疑问和需求？比如一个组件调用另外一个组件作为自己的组件，那么我们如何进

骑猪看日落/ 2022年03月22日 06:44/ 0 赞/ 408 阅读

相关 Vue父组件向子组件传递参数

1、父组件projectBatchsindex.vue // 使用:projectId="this.projectId" 传递参数 <ProjectBatch

以你之姓@/ 2022年02月14日 09:17/ 0 赞/ 517 阅读

相关【父向子传参一】Vue-cli脚手架创建项目之父组件向子组件传递参数的props方法

Parent.vue文件 <template> <div class="parent"> <p><span>这

淩亂°似流年/ 2021年09月18日 10:50/ 0 赞/ 303 阅读

相关 Vue.js--组件使用props传递数据

基本用法通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过pro

刺骨的言语ヽ痛彻心扉/ 2021年08月13日 19:10/ 0 赞/ 565 阅读