今天主要学习了Vue的ref属性和props配置项相关的内容。ref属性比较好理解,传统获取DOM元素一般使用原生获取DOM的方法,比如:通过id获取、class获取等等的方式再对元素进行相当应的操作,但在Vue组件里面想要获取某个元素当然不是使用原生的方法,这时Vue就给我们提供了ref这个属性,这个属性写在需要获取的标签上然后给它起一个名字即可,这样我们就可以通过各个配置项中的this.$refs.属性名,获取到刚才起名的标签,注意配置项里面this不是Vue实例对象而是组件实例对象vc,不过现阶段获取到组件实例对象的作用不大,但学到后期就非常需要获取到组件实例对象来进行操作。接下来说一下props配置项,首先Vue设计这个配置项是为了让组件可以接收外部传过来的数据,既然是配置项肯定先要在Vue实例里面先配置好props配置项(对象形式),接收数据有三种方法区分,第一种是数组形式,简单的声明接收,它没有什么限制,只是声明可以接收的数据的名字,但这种方法在开发中是最常用的,因为方便直接,很多数据是不需要限制时就可以大方的使用它;第二种是对象的类型,它可以在接收的同时对数据进行类型限制(type:string)需输入字符串类型,比如:字符串型、数字型,把要接收的数据名全部放到对象内再输入类型的限制,虽然有限制但用户一样可以传入不符合类型的数据,它只会在控制台报错提示;第三种是对象嵌套的形式,每一个数据名都可以对其设置多个限制,一般用在密码输入等等的需求上,有类型限制,这个和前面说到的一样、还有指定默认值设置,可以给一个数据名设置一个默认值(default:1)默认值就是1,如果用户不输入就会使用提前设置好的默认值、最后一个限制就是必填限制(required:true)用布尔值表示,true表示必须输入的意思,用户如果不输入就会提示报错。需要注意的是默认值和必填限制一般不会一起使用,因为这样会没有必要,还有一个需要注意的点props是只读的,Vue底层会监测到我们对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么就需要复制props的内容到data中一份,然后去修改data中的数据即可实现数据的修改。
学习Vue的props配置总结
最新推荐文章于 2024-05-06 21:59:32 发布