vue3笔记 ref标签 04

储存标记中的内容

<template>
  <div class="about">
    <h1 ref="Holly">你好</h1>
    <button @click="hhh">点击输出上述h1</button>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
let Holly = ref()
function hhh (){
  console.log(Holly.value);
}
</script>

　　输出：

<h1>你好</h1>

　　在组件上用

<template>
  <div class="about">
    <h1 ref="Holly">你好</h1>
    <button @click="hhh">点击输出上述h1</button>
    <Person ref="demo"/>
  </div>
</template>
<script lang="ts" setup>
import Person from '../components/HelloWorld.vue'
import { ref, watch } from 'vue'
let Holly = ref()
let demo = ref()
function hhh (){
  console.log(Holly.value);
  console.log(demo.value);
}

</script>

　　

<template>
  <div>
    组件
  </div>
</template>

<script setup lang="ts">
import {ref,defineExpose} from 'vue'
let a = ref(0)
let b = ref(1)
let c = ref(2)
defineExpose({a,b,c})
</script>

<style scoped>

</style>