vue书写注意事项(1)
来源:互联网 发布:java分布式 编辑:程序博客网 时间:2024/06/07 23:46
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', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
// 这样就允许拿 `value` 这个prop 做其它事了
value: String
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上述代码等价于:
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
注意你仍然需要显式声明 checked 这个 prop。
10. 非父子间通信
简单情况下,可以申请一个空的vue实例作为事件总线,复杂情况使用vux去处理
var bus =new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected',1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected',function (id) {
// ...
})
- vue书写注意事项(1)
- Vue注意事项
- 硕士论文书写注意事项
- getElementById 书写注意事项
- Mail 书写注意事项
- CSS代码书写注意事项
- html/css书写注意事项
- 前端代码书写注意事项
- CSS命名规范参考及书写注意事项 (推荐)
- Vue路由(router)使用注意事项
- 书写文档的一个注意事项
- Delphi 书写DLL的注意事项
- 英文书面文件书写注意事项
- 书写sql时的注意事项
- linux下脚本书写注意事项
- 数据库SQL语句书写注意事项
- 数据库SQL语句书写注意事项
- Pig脚本书写时候注意事项
- Spring mvc Controller 处理安卓post和get请求
- 为什么 parseInt(0.0000008) === 8?
- uWSGI的安装与配置(官网摘录)
- static在工具类中的使用
- HDU 1160 FatMouse's Speed (DP)
- vue书写注意事项(1)
- sql server 截取字符串写法
- 97 Things Every Programmer Should Know
- frameset
- Spring Framework 5.0:Resources资源文件获取接口
- 骑驴找马面试难,你可以这样解决!
- JAVA中NIO,AIO,BIO详解
- windows下安装OpenSSL+vs2010(不使用ms\do_ms命令)
- getResourceAsStream