1. 传递一个数字时,需要使用 v-bind,从而让它的值被当作 JavaScript 表达式计算,如果不使用,会被当作字符串:
<!-- 传递真正的数值 -->
<comp v-bind:some-prop="1"></comp>
2. 如果向子组件传递的数据是一个对象,可以使用不带任何参数的 v-bind
todo: {
text: 'Learn Vue',
isComplete: false
}
然后:
<todo-item v-bind="todo"></todo-item>
3. 注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态
4. prop验证:
正常情况下,我们不需要验证时,用的时字符串数据进行接收数据props:[‘a’,’b’];
如果需要对传入的数据进行验证,需要用对象的形式定义prop
props: {
// 基础类型检测 (`null` 指允许任何类型)
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 value > 10
}
}
}
type 可以是下面原生构造器:
· String
· Number
· Boolean
· Function
· Object
· Array
· Symbol
type 也可以是一个自定义构造器函数,使用 instanceof 检测。
Prop在组件实例创建之前进行校验,所以在default或者validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用。
5. 非prop特性,直接被传入子组件的根组件上,class和style会自动合并
6. 子组件向父组件通信,用$emit,父组件咋在模板上直接用 v-on 绑定
7. 给组件绑定原生事件,用.native修饰符,例如@click.native=’doSomeThing’
8. .sync组件修饰符,用于数据双向绑定,修改子组件里对应的数值,父组件对应的数值也会发生改变。vue内部自动触发了on 和emit事件。
如下代码
<comp :foo.sync="bar"></comp> |
会被扩展为:
<comp :foo="bar" @update:foo="val => bar = val"></comp> |
当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:
this.$emit('update:foo', newValue) |
9. 使用表单输入时,子组件直接用props的value可以接收到父组件写的value值,不用父组件传递
默认情况下,一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突:
Vue.component('my-checkbox', { |
<my-checkbox v-model="foo" value="some value"></my-checkbox> |
上述代码等价于:
<my-checkbox |
注意你仍然需要显式声明 checked 这个 prop。
10. 非父子间通信
简单情况下,可以申请一个空的vue实例作为事件总线,复杂情况使用vux去处理
var bus = new Vue() |
// 触发组件 A 中的事件 |
// 在组件 B 创建的钩子中监听事件 |