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

最新推荐文章于 2024-02-19 09:31:04 发布

原创最新推荐文章于 2024-02-19 09:31:04 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #is refs props #校验

前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍了Vue组件中的一些关键点，包括：使用`is`属性解决特殊场景下的组件渲染问题，如在`ul`或`select`中使用组件；通过`ref`直接访问子组件或DOM元素，以及在组件上使用`ref`获取组件实例；详细阐述了组件参数`props`的校验规则，强调了不能直接修改props传递的值，但可以通过拷贝使用；最后讨论了`props`特性的重要性，以及不正确使用非`props`属性可能出现的错误情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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