Vue组件中prop属性使用说明实例代码详解_vueprop资源-CSDN文库

52 浏览量 2020-08-27 10:16:03 上传评论收藏 84KB PDF 举报

资源推荐

资源详情

资源评论

Vue组件中组件中prop属性使用说明实例代码详解属性使用说明实例代码详解

主要介绍了Vue组件中prop属性使用说明,非常不错具有一定的参考借鉴价值，需要的朋友可以参考下

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 传入一个静态的值：

<blog-post title="My journey with Vue"></blog-post>

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

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

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

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

<blog-post v-bind:likes="42"></blog-post>

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

传入一个布尔值传入一个布尔值

<blog-post favorited></blog-post>

<base-input v-bind:favorited="false">

<base-input v-bind:favorited="post.currentUserFavorited">

传入一个数组传入一个数组

<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

传入一个对象传入一个对象

<blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }"></blog-post>

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

传入一个对象的所有属性传入一个对象的所有属性

如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一

个给定的对象 post：

post: {

id: 1,

title: 'My Journey with Vue'

}

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

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

内容反馈

weixin_38603936

粉丝: 6
资源: 905

最新资源

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

feedback-tip