ref标签、style的scope

golitter.2024-10-15 3:08

ref标签

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

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

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

DOM：

vue 复制代码

<template>
  <div class="person">
    <h2 ref="title2">上海</h2>
    <button @click="showTitle2">显示title2</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, onMounted } from 'vue'
// 创建一个title2的ref
let title2 = ref();

function showTitle2() {
  console.log(title2.value);
}
</script>

组件：

父组件：

vue 复制代码

<template>
  <div id="app">
    <h2 ref="title2">北京</h2>
    <button @click="showTitle2">显示title2</button>
    <Person ref="psn" />
  </div>
</template>

<script lagn="ts" setup>
  import Person from './components/Person.vue';
  import { ref, onMounted } from 'vue';
  // 创建一个title2的ref
  let title2 = ref();
  let psn = ref();
  
  function showTitle2() {
    console.log(title2.value);
  }
</script>

<style scoped>
  .app {
    background-color: aqua;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
</style>

子组件：

需要将想让父组件查看的ref标签导出。

使用：defineExpose。

vue 复制代码

<template>
  <div class="person">
    <h2 ref="title2">上海</h2>
    <button @click="showTitle2">显示title2</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, onMounted } from 'vue'
// 创建一个title2的ref
let title2 = ref();

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

defineExpose({
  title2
})
</script>

style的scoped

组件中<style>添加scoped属性表示：只有当前组件对应得模板<templete>内的可以使用，其他组件不能使用。

vue 复制代码

<template>
  <div id="app">
    <h2 ref="title2">北京</h2>
    <button @click="showTitle2">显示title2</button>
    <Person ref="psn" />
  </div>
</template>

<script lagn="ts" setup>
  import Person from './components/Person.vue';
  import { ref, onMounted } from 'vue';
  // 创建一个title2的ref
  let title2 = ref();
  let psn = ref();
  
  function showTitle2() {
    console.log(title2.value);
  }
</script>

<style scoped>
  .app {
    background-color: aqua;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
</style>