Dans vue3, l'instance du sous-composant est obtenue via ref et la valeur n'est pas définie.

C'est ainsi que Vue3 obtient l'instance du sous-composant (structure DOM, données et méthodes du sous-composant) via la référence. Aujourd'hui, lors de l'écriture de index.vue (composant parent), je souhaite obtenir les données et les méthodes du sous-composant en liant la référence au sous-composant. , les données du sous-composant imprimé ne sont pas définies ; la méthode courante pour la recherche Baidu est :

Connexion de référence : Vue3 --- obtenez des instances de sous-composants (structures DOM, données et méthodes dans les sous-composants) via ref, la merveilleuse utilisation de ref dans vue3, obtenez et appelez des méthodes de sous-composant dans vue, utilisez les données de sous-composant dans vue_vue3 pour obtenir le composant ref_imkaifan's Le code du blog blog-CSDN est le suivant :

Sous-ensemble

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
    <input type="file" id="fileInput" name="file" multiple="multiple" @change="selectFile"/>
  </div>
</template>
 
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const msg = ref('HelloWorld') // 响应式数据：msg
    const fileList = ref([]) // 响应式数据：上传的文件列表
    function selectFile () { // 有文件上传时
      var file = document.getElementById('fileInput').files[0] // File(Blob) 对象   File extends Blob
      fileList.value.push(file)
    }
    return { // return中的数据会被父组件拿到
      msg,
      fileList,
      selectFile
    }
  }
})
</script>
 

composant parent

<template>
  <div class="home">
    <HelloWorld ref="sonRef" />
    <button @click="getSonComponent">GetSonComponent</button>
  </div>
</template>
 
<script>
import { defineComponent, ref } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
 
export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld
  },
  setup(){
    const sonRef = ref(null) // 通过 ref 绑定子组件
    function getSonComponent () { // 通过 ref 获取子组件\
      // 获取子组件的数据
      console.log(sonRef.value)
      console.log(sonRef.value.msg)
      sonRef.value.fileList.forEach(item => {
        console.log(item)
      })
    }
    return {
      sonRef,
      getSonComponent
    }
  }
})
</script>

Et le code dans lequel j'obtiens les données de l'instance du composant via ref et les imprime comme non défini est :

composant parent

<template>
    <div>
    <welcome></welcome>
    </div>
</template>

<script setup lang="ts">
  import welcome from './welcome.vue'
  import { ref,onMounted } from 'vue'

const welcomeRef = ref(null);
console.log("welcomeRef ",welcomeRef.value.isScroll)  //welcomeRef undefined
<script>

Sous-ensemble

<template>
    <div v-if="isScroll">
    测试内容1
    </div>
    <div v-else>
    测试内容2
    </div>
</template>

<script setup lang="ts">
  import { ref,onMounted } from 'vue'

  const isScroll= ref(false);
<script>

Après avoir examiné les informations, nous avons constaté :

Basé sur  <script setup> le cas + TS

En trois étapes

1. Exposez les propriétés qui doivent être appelées par le composant parent dans le composant enfant.

2. Définir le type dans le sous-composant

3. Le composant parent introduit le type du composant enfant et définit ref

La première étape : DéfinirExpose expose les propriétés du sous-composant
DéfinirExpose({ select })

Étape 2 : Définissez le type d'instance de composant dans le composant enfant
. Si la première étape est terminée, lorsque le composant parent appelle une propriété dans l'instance de composant enfant, TS signalera une erreur et ne pourra pas trouver la propriété (mais cela n'affectera pas le opération), voici donc la réponse : Un type doit être défini pour déclarer le type d'instance de sous-composant

Étape 3 : définissez le type de données exposé du sous-composant, définissez ref pour
déclarer la référence du sous-composant et obtenez l'instance du sous-composant (notez que seuls les attributs exposés peuvent être utilisés)