学习Vue的props配置总结

今天主要学习了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中的数据即可实现数据的修改。