is+ref 属性

最新推荐文章于 2024-07-24 09:31:05 发布

前端小吕

最新推荐文章于 2024-07-24 09:31:05 发布

阅读量1.3k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_49230250/article/details/108169219

版权

改变标签名称或者组件名称来达到切换标签展示

(1)改变html默认标签约束

<table>
	<h2 is="p"></h2>
</table>

(2)实现动态组件

利用属性绑定可以实现不同组件的展示

<标签名 :is="变量名"></标签名>

(1)普通标签

如果要实现的效果用vue不知道怎么去做，但是知道原生js的做法，可以给普通的html标签添加一个ref属性，这样在组件挂载完成后就可以获取到这个标签的DOM。

<template>
	<h2 ref="myh2"></h2>
</template>
<script>
	mounted(){
		this.$refs.myh2.innerHTML = 'hello ref'
	}
</script>

(2)vue组件

ref属性可以使用到子组件上，通过ref属性，可以在父组件中获取到子组件的这个vue实例，然后就可以实现组件通信的效果。

<子组件 ref="自定义名称" ></子组件>

<script>
	mounted(){
		this.$refs.自定义名称.子组件的初始数据变量名 = '新的值'
	}
</script>

注意：ref需要在组件挂载完成后才能够使用

(3)数组

在遍历循环的标签或者组件上，设置了ref属性后，对应的数据是一个数组，数组中的每一个元素都是一个DOM结构。

<div class="box" ref="boxitems" v-for="item in 5" :key="item">{{ item }}</div>

此时boxitems就是一个数组

关注