vue3笔记 ref标签 04

储存标记中的内容

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

　　输出：

1 2	`<code-pre` `class="code-pre"` `id="pre-bDHZ2y"><code-line` `class="line-numbers-rows"></code-line><h1>你好</h1>` `</code-pre>`

　　在组件上用

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

<code-pre class="code-pre" id="pre-nD2hfF"><code-line class="line-numbers-rows"></code-line><template>
<code-line class="line-numbers-rows"></code-line>  <div>
<code-line class="line-numbers-rows"></code-line>    组件
<code-line class="line-numbers-rows"></code-line>  </div>
<code-line class="line-numbers-rows"></code-line></template>
<code-line class="line-numbers-rows"></code-line>
<code-line class="line-numbers-rows"></code-line><script setup lang="ts">
<code-line class="line-numbers-rows"></code-line>import {ref,defineExpose} from 'vue'
<code-line class="line-numbers-rows"></code-line>let a = ref(0)
<code-line class="line-numbers-rows"></code-line>let b = ref(1)
<code-line class="line-numbers-rows"></code-line>let c = ref(2)
<code-line class="line-numbers-rows"></code-line>defineExpose({a,b,c})
<code-line class="line-numbers-rows"></code-line></script>
<code-line class="line-numbers-rows"></code-line>
<code-line class="line-numbers-rows"></code-line><style scoped>
<code-line class="line-numbers-rows"></code-line>
<code-line class="line-numbers-rows"></code-line></style>
</code-pre>

__EOF__

本文作者：userName
本文链接：https://www.cnblogs.com/wencaiguagua/p/18059906.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！