1.局部注册的组件在其子组件中不可用。
2.对于props值,在 JavaScript 中是 camelCase 的;在html中是 kebab-case 的;在字符串模板中不受限制。
props: {
propA: Number, // 基础的类型检查 (`null` 匹配任何类型)
propB: [String, Number], // 多个可能的类型
propC: {
type: String,
required: true // 必填的字符串
},
propD: {
type: Number,
default: 100 // 带有默认值的数字
},
propE: { // 带有默认值的对象
type: Object,
default: function () { // 对象或数组且一定会从一个工厂函数返回默认值
return { message: 'hello' }
}
},
propF: { // 自定义验证函数
validator: function (value) {
return ['success', 'warning', 'danger'].indexOf(value) !== -1 // 必须匹配下列一个
}
}
}
3.事件名: this.$emit('myEvent'), 因为 HTML 是大小写不敏感的),所以v-on:myEvent将会变成v-on:myevent——导致myEvent不可能被监听到。
所以,事件名推荐使用:kebab-case或者全小写
4.插槽:
示例:
普通插槽:
子组件:
<a v-bind:href="url" class="nav-link">
<slot></slot>
</a>
父组件:
<navigation-link url="/profile">
<font-awesome-icon name="user"></font-awesome-icon> //可以插入一个组件
Your Profile //可以插入文本
<span class="fa fa-user"></span> //可以插入html
</navigation-link>
子组件:
<a v-bind:href="url" class="nav-link">
<slot>Submit</slot> //插槽的默认内容为'Submit',当有对应内容时'Submit'即被覆盖
</a>
具名插槽(一个子组件需要多个插槽):
子组件:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot> //未命名插槽叫做默认插槽
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
父组件中(template用法):
<base-layout>
<template slot="header">
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p> //未命名的内容会匹配到未命名的插槽上
<p>And another one.</p>
<template slot="footer">
<p>Here's some contact info</p>
</template>
</base-layout>
父组件中(普通元素用法):
<base-layout>
<h1 slot="header">Here might be a page title</h1>
<p>A paragraph for the main content.</p> //未命名的内容会匹配到未命名的插槽上
<p>And another one.</p>
<p slot="footer">Here's some contact info</p>
</base-layout>