组件的使用细节点--is、ref、props特性、校验

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>
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Qian_mos/article/details/88855003