is+ref 属性-蒲公英云

is+ref 属性

Myth丶恋晨 2022-11-30 01:29 27阅读 0赞

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

(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就是一个数组

is+ref 属性