VueProp属性功能与用法实例详解_vue:prop动态 - CSDN文库

112 浏览量更新于2023-05-11 评论收藏 90KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue Prop属性功能与用法实例详解属性功能与用法实例详解

主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方

法及相关操作注意事项,需要的朋友可以参考下

本文实例讲述了Vue Prop属性功能与用法。分享给大家供大家参考，具体如下：

1 Prop 的大小写的大小写 (camelCase vs kebab-case)

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板

时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

html：

<div id="app-1">

<blog-post post-title="你好！"></blog-post>

</div>

js：

//Prop 的大小写 (camelCase vs kebab-case)

Vue.component('blog-post', {

//在 js 中是 camelCase

props: ['postTitle'],

template: '<h3>{{ postTitle }}</h3>'

});

new Vue({

el: '#app-1'

})

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

2 Prop 类型类型

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

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

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

的名称和类型：

props: {

title: String,

likes: Number,

isPublished: Boolean,

commentIds: Array,

author: Object

}

这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。你会在这个页面接下

来的部分看到类型检查和其它 prop 验证。

3 传递静态或动态传递静态或动态 Prop

像这样，你已经知道了可以像这样给 prop 传入一个静态的值：

<blog-post title="开花啦"></blog-post>

你也知道 prop 可以通过 v-bind 动态赋值，例如：

<blog-post v-bind:title="post.title"></blog-post>

<blog-post v-bind:title="post.title + ' 作者： ' + post.author.name"></blog-post>

在上述两个示例中，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 prop。

3.1 传入一个数字传入一个数字

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

评论0

weixin_38698433

粉丝: 4
资源: 969

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈