前端學習-vue影片學習007-標籤的ref屬性

ayubene發表於2024-03-06
前端Vue

尚矽谷影片教程

給標籤增加ref屬性，可以透過屬性值取到標籤內容

<template>
    <div class="person">
        <h1>this</h1>
        <h2 ref="title">that</h2>
        <button @click="showLog">changeTemp</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {ref,watch,watchEffect} from 'vue'
    
    let title = ref()

    function showLog(){
        console.log(title.value); 
    }

   
</script>

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

    li {
        font-size : 20px;
    }
</style>

data-v-xxxx 區域性標識


如果在style中加了scoped,代表為區域性樣式，使用ref標籤時會出現data-v-xxxx 標識

<style scoped>
</style>

在元件標籤中使用ref標籤

如果根元件想要獲取components檔案內的資料，需要兩步：

  • 在根元件內的元件標籤內增加ref標籤
  • 對應元件文件中使用defineExpose

App.vue

<template>
    <Person ref="temp"/>
    <button @click="showLog">test</button>   
</template>

<script lang="ts" setup name="App">
    import Person from './components/Person.vue';
    import {ref} from 'vue'

    let temp = ref()

    // 如果components的檔案內不使用defineExpose，是無法獲取到元件標籤內的資料的
    function showLog(){
        console.log(temp.value);
    }
</script>

Person.vue

<template>
    <div class="person">
        <h1>this</h1>
        <h2 ref="title">that</h2>
        <button @click="showLog">changeTemp</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {ref,defineExpose} from 'vue'
    
    let title = ref()

    let a = ref(0)
    let b = ref(1)
    let c = ref(2)

    function showLog(){
        console.log(title.value); 
    }

    // 將資料a,b暴露給根元件，隱藏c
    defineExpose({a,b})
   
</script>

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

    li {
        font-size : 20px;
    }
</style>

相關文章