1. is属性
当在一些特地搭配的标签中用到组件时,如在ur标签里用到组件,但是ul有些标签搭配限制如搭配 li /ol,这时若用的是<xxx组件名>在页面中不会显示,那么可用is来解决,即< li is=“xxx组件名” >,select里的标签只能是option,但是需要用到组件,也可以用is来解决。
<tbody>
<tr is="row组件名"></tr>
</tbody>
2. 组件的refs
当要在JS中直接访问子组件,可以使用ref, eg:< 组件名 ref=“名字xx”>;也可以用ref来标明DOM元素如: < li ref=“xx名字”>;
这样在JS中可以使用 this.$refs.xx名字来直接访问DOM元素或者组件。
当在组件上使用ref,那么this.$refs.名字 获取到了组件实例,可以使用组件的所有方法。
3. 组件参数校验
注:对于父组件传递给子组件的任意类型的参数,子组件利用props接收后,在子组件的实例中不可以直接对齐做更改,但是可以将该参数进行拷贝,拷贝后参数值就作为子组件属性值
子组件可以要求父组件传递的参数类型。在props中声明参数类型。
//content为一个对象时
props: {
content: {
type: String, //类型校验-----表明参数为string类型
required: false, //参数不是必传
default: 'default value', //在没有传递参数时,子组件会默认显示该值
validator: function(value) { //value 表示传递的参数,validator自定义校验函数设定参数需要满足校验规则
return (value.length>5);
}
}
}
4. props特性
父组件发送参数,子组件的props接收;
5. 非props特性
父组件有属性名content=“xxx”,但是子组件没有props属性即没有接受父组件的传值,但是却在子组件中使用了父组件的属性名{{content}},此时会报错。若不用{{content}},而是将{{content}}直接换成hello,那么最终hello会显示在子组件外层的标签上:
< div content=‘hell’>hello< \div>