| 组件注册 |
| 组件名 |
Vue.component('my-component-name', { /* ... */ })
第一个参数即组件名, 尽量字母全小写且必须包含一个连字符
|
| 全局注册 |
Vue.component('my-component-name', { /* ... */ })
|
| 局部注册 |
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
|
| 模块系统 |
| 局部注册组件 |
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
如此, ComponentA和ComponentC即可在B里使用
|
| 基础组件的自动化全局注册 |
全局注册的行为必须在 根 Vue 实例 (通过 new Vue) 创建之前发生
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其组件目录的相对路径
'./components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
|
|
| |
|
| |
|
| Prop |
| prop的大小写 |
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符
在js里camel, html模板里kebeb, 如sampleText对应sample-text
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
|
| prop类型 |
除了只指定prop名字,
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
还可以指定其类型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
|
| 传递静态或动态prop |
| 静态 |
<blog-post title="My journey with Vue"></blog-post>
|
| 动态 |
任何类型的值都可以传给一个 prop
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
|
|
| 单向数据流 |
|
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，
但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
|
|
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
|
|
注意在 JavaScript 中对象和数组是通过引用传入的，
所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
|
|
| prop验证 |
| |
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
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
}
}
}
})
那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data 、 computed 等) 在 default 或 validator 函数中是不可用的。
|
| 类型检查 |
type:
null/undefined会通过一切类型检查
|
|
| 非prop的特性 |
一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。
| |
组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。
|
| 替换/合并已有的特性 |
| class, style |
外部传入的和内部的合并
(内部的在前，传入的在后)
|
| class, style以外 |
外部传入的替换掉内部的 |
|
| 禁言特性继承 |
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false
# TODO: 例子到底啥意思?
|
|
| 自定义事件 |
| 事件名 |
始终使用 kebab-case 的事件名,全小写。推荐update:prop名
例update:my-sample-prop
|
| 自定义组件的v-model |
v-model默认利用叫value的prop和input事件
● 改变默认, 用model选项
注意仍然需要在prop里声明
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
<base-checkbox v-model="lovingVue"></base-checkbox>
|
| 将原生事件绑定到组件 |
# TODO: finish here |
| .sync修饰符 |
<text-document v-bind:title.sync="doc.title"></text-document>
相当于
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
● 不能和表达式一起用, 类似v-model, 只接属性名
● 同时添加多个
<text-document v-bind.sync="doc"></text-document>
这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
|
| |
|
| |
|
| 插槽 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| 动态组件&异步组件 |
| # TODO: finish here |
https://cn.vuejs.org/v2/guide/components-dynamic-async.html |
| |
|
| |
|
| |
|
| |
|
| |
|
| 处理边界情况 |
| # TODO: finish here |
在绝大多数情况下，我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过也确实在一些情况下做这些事情是合适的。
https://cn.vuejs.org/v2/guide/components-edge-cases.html
|
| |
|
| |
|
| |
|
| |
|
| |
|
