目录
模板语法
数据传递
名字规范
//定义
//短横线分隔命名
Vue.component('blog-post', {
props: ['post-Title'],
template: '<h3>{{ postTitle }}</h3>'
})
//驼峰式命名
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!--使用-->
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
静态数据
<blog-post title="My journey with Vue"></blog-post>
动态数据
<!--静态数据传入的是值；动态数据传入的是变量；-->
<blog-post v-bind:title="post.title"></blog-post>
传入数字
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>
传布尔值
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post favorited></blog-post>
<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<base-input v-bind:favorited="false">
<!-- 用一个变量进行动态赋值。-->
<base-input v-bind:favorited="post.currentUserFavorited">
传入数组
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
传入对象
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:post="post"></blog-post>
传入一个对象的所有属性
<!--模板-->
<blog-post v-bind="post"></blog-post>
//数据
post: {
id: 1,
title: 'My Journey with Vue'
}
//等价于
/*
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>
*/
单向数据
父通过Prop传递数据给子；父数据的更新会流动到子组件中。
不应该在子组件中改变父的Prop数据。
两种常见试图改变Prop的情形
情景1：
若想传进的Prop数据作为一个本地的prop数据来使用：
可以在本地定义一个data属性并将prop用作其初始值；
如果其值是对象或数组，还需对其进行克隆再赋值（因为js中数组和对象是引用类型。这可避免在子组件中改变父组件的数据）。
情景2：
prop以元素的值传入需要进行转换：可以定义一计算属性。
数据验证
类型检查
String
Number
Boolean
Function
Object
Array
Symbol
特性替换
除了class和style属性为，其他的属性都是替换
特性合并
class和style属性
特性继承禁用
不希望组件的根元素继承特性=》设置选项对象的inheritAttrs:false
手动决定特性赋予————推荐创建基础组件时用(当组件重构时)
// 通过inheritAttrs:false + v-bind="$attrs"实现
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
`
})
