Vue脚手架③

文章目录

​​ref属性​​​​props配置​​

ref属性

我们拿出一个App组件：

现在我们如果想要拿到这个h2元素，我们的第一反应就是使用原生js，给h2标签取个id，然后使用getElementById这个方法把它拿到。但是这是Vue我们应该减少直接操作DOM的操作。

这个时候Vue给我们提供了一个属性ref，我们通过它给标签取一个名字：

我们打印此时的组件实例对象vc发现：

于是我们这样去获得：

结果：

以上我们都是在html标签中去使用ref属性，如果我们在组件标签中去使用会怎么样呢？

结果：

我们用这种办法可以拿到组件的实例对象vc。

总结：

被用来给元素或子组件注册引用信息（id的替代者）应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）使用方式：

打标识：​​

.....

props配置

我们知道组件时可以复用的。如果我们在复用的时候想把其中的数据修改成自己的该怎么呢？如果全部自己重新去配置非常的麻烦，这个时候我们就可以借助props配置项。

加入我们现在有一个组件：

我们在复用的时候想对其中的数据进行替换，那么我们可以这样：

把要修改的数据从data里面拿掉，也就是说不在data里面写死，而是用的时候你指定是什么，他就是什么。

在App组件中：

结果：

在App组件中：

运行项目之后我们发现：

他会提醒我们传入的数据类型与要求的不符合。

除了这两种我们还有一种接收方式：

在这里我们可以对接收的每一个数据进行详细配置，常见的配置项有三个：

type – 限制类型default – 在不是必须传入的数据时，默认的数据值required – 是否必须传入一般default与required不会同时出现

在App组件中：

结果：

如果我们没有传入studentName，那么控制台时会报错提醒我们的：

也就是初始值是接收到的并传递到data中去，我们修改的值其实是data上的

总结：

功能：让组件接收外部传过来的数据传递数据：​​​​接收数据：

第一种方式（只接收）：​​props:['name'] ​​第二种方式（限制类型）：​​props:{name:String}​​第三种方式（限制类型、限制必要性、指定默认值）：

props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 }}

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。