Bootstrap

【Vue】Vue3.0(十三)中标签属性ref(加在普通标签上、加在组件标签上)、局部样式

上篇文章: 【Vue】Vue3.0 (十二)、watchEffect 和watch的区别及使用

🏡作者主页:点击!

🤖Vue专栏:点击!

⏰️创作时间:2024年10月18日20点56分

标签属性ref(加在普通标签上、加在组件标签上)有什么区别

在Vue 3.0中,ref是一个用于创建响应式数据的函数,它可以用来在组件中引用DOM元素或子组件实例。以下是关于ref的详细介绍:

作用:用于注册模板引用。

  • 用在普通DOM标签上,获取的是DOM节点。

  • 用在组件标签上,获取的是组件实例对象。

基本用法

  • 在Vue 3.0中,使用ref函数来创建一个响应式的引用。例如:
<template>
  <div ref="myDiv">这是一个 div 元素</div>
</template>

<script setup>
import { ref } from 'vue';

const myDiv = ref();
</script>

在上述代码中,使用ref函数创建了一个名为myDiv的响应式引用,并将其初始值设置为null。在模板中,通过ref指令将myDiv引用与div元素绑定。这样,在组件挂载后,myDiv的值将指向该div元素的实例。

访问DOM元素

  • 可以通过ref引用访问DOM元素的属性和方法。例如:
<template>
  <div ref="myDiv">这是一个 div 元素</div>
  <button @click="changeText">改变文本</button>
</template>

<script setup>
import { ref } from 'vue';

const myDiv = ref();

const changeText = () => {
  myDiv.value.textContent = '这是改变后的文本';
};
</script>

在上述代码中,定义了一个名为changeText的方法,在该方法中,通过myDiv.value访问div元素的textContent属性,并将其值修改为'这是改变后的文本'。当点击按钮时,div元素的文本内容将被改变。

访问子组件实例

  • ref还可以用于访问子组件实例,以便在父组件中调用子组件的方法或访问子组件的数据。例如:
// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('这是子组件的消息');

const changeMessage = () => {
  message.value = '这是改变后的消息';
};

defineExpose({
  changeMessage,
});
</script>

// 父组件
<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const child = ref(null);

const callChildMethod = () => {
  child.value.changeMessage();
};
</script>

在上述代码中,在子组件中定义了一个名为message的响应式数据,并定义了一个名为changeMessage的方法,用于改变message的值。通过defineExpose函数将changeMessage方法暴露给父组件。在父组件中,使用ref引用获取子组件实例,并在callChildMethod方法中调用子组件的changeMessage方法。

注意事项

  • ref的值是一个响应式对象,需要通过.value来访问其实际的值。
  • 在模板中使用ref时,需要确保ref引用的元素或组件已经挂载,否则ref的值将为null
  • ref引用在组件的整个生命周期内都是有效的,可以在组件的任何方法中使用。
  • 当使用ref引用一个组件时,需要确保该组件已经被正确注册。

ref是Vue 3.0中一个非常有用的特性,它使得在组件中访问DOM元素和子组件实例变得更加方便和灵活。通过ref,可以轻松地实现对DOM元素的操作和对子组件的交互,从而增强了组件的复用性和可维护性。

举个栗子~

在这里插入图片描述

App.vue:


<template>
  <h4 class="person" ref="title2">app的H3标签</h4>
  <button @click="showTel">点我输出app的h3</button>
  <button @click="showRen">点我输出Person标签</button>
  <Person ref="ren"/>

</template>

<script lang="ts" setup name="App"> //当前根组件的组件名
import Person from './components/Person.vue'  
import {ref} from 'vue'

let title2 =ref();
let ren =ref();
function showTel(){
console.log(title2.value);
}

function showRen(){
  console.log(ren.value);
  console.log(ren.value.b);
}

</script>

<style >
.app {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>


Person.vue

<template>
    <div class="person">
        <h4 ref="title2">北京</h4>
        <h4>尚硅谷</h4>
        <button @click="showH3">点我展示H3标签</button>
  
    </div>
</template>

<script lang="ts" setup name="Person">

import {  ref, watch,defineExpose } from 'vue'
//数据
let title2 =ref();
let a =ref(0);
let b =ref(1);
let c =ref(2);

function showH3(){
    console.log(title2.value);
}

//定义要让父对象能看到的东西 ,注意这个里面要传入一个对象,对象中可以放键值对,这些键值对就是可以让父亲看到的属性
defineExpose({a:a,b:b,c:c});

</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

li {
    font: 1em sans-serif;
}
</style>

结果1:
验证1:对于ref标记不会像id属性那样,多个组件之间会互相影响;ref标记及时一样,在一起使用的组件中,那也不会影响,是相互隔离的;
我点击了分别点击了app 和Person中的按钮,分别进行了输出,没有影响
在这里插入图片描述
验证2:app中能访问Person中暴露的方法和属性,这样在实际开发中,可以父组件去使用子组件的属性或者方法;
在这里插入图片描述

补充知识:局部样式:

一般写样式的时候,会加上scoped属性,这样就保证了这个选择器写的样式只在当前vue中生效,避免了影响其他的组件中同样选择器样式的展示
在这里插入图片描述

;