欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Vue3?父組件調(diào)用子組件方法($refs?在setup()、＜script?setup＞?中使用)

 更新時間：2022年08月01日 11:02:38   作者：卡爾特斯  
這篇文章主要介紹了Vue3?父組件調(diào)用子組件方法（$refs?在setup()、＜script?setup＞?中使用）,在 vue2 中 ref 被用來獲取對應(yīng)的子元素，然后調(diào)用子元素內(nèi)部的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

在 vue2 中 ref 被用來獲取對應(yīng)的子元素，然后調(diào)用子元素內(nèi)部的方法。

<template>
  <!-- 子組件 -->
  <TestComponent ref="TestComponent"></TestComponent>
</template>

<script>
// 導(dǎo)入子組件
import TestComponent from './TestComponent'
export default {
  components: {
    TestComponent
  },
  mounted () {
    // 調(diào)用子組件方法
    this.$refs.TestComponent.show()
  }
}
</script>

在 Vue3 setup () {} 中使用 ref，如何獲取到子元素，并調(diào)用方法：

<template>
  <!-- 子組件 -->
  <TestComponent ref="RefTestComponent"></TestComponent>
</template>

<script>
// 導(dǎo)入子組件
import TestComponent from './TestComponent'
import { ref } from 'vue'
import { nextTick } from 'process'
export default {
  components: {
    TestComponent
  },
  setup () {
    // 定義一個對象關(guān)聯(lián)上子組件的 ref 值（注意：這里的屬性名必須跟子組件定義的 ref 值一模一樣，否者會關(guān)聯(lián)失效）
    const RefTestComponent = ref(null)
    // 延遲使用，因為還沒有返回跟掛載
    nextTick(() => {
      RefTestComponent.value.show()
    })
    // 返回
    return {
      RefTestComponent
    }
  }
}
</script>

在 Vue3 <script setup> 中使用 ref，如何獲取到子元素，并調(diào)用方法

<template>
  <!-- 子組件 -->
  <TestComponent ref="RefTestComponent"></TestComponent>
</template>

<script setup>
// 導(dǎo)入子組件
import TestComponent from './TestComponent'
import { ref } from 'vue'
import { nextTick } from 'process'

// 定義一個對象關(guān)聯(lián)上子組件的 ref 值（注意：這里的屬性名必須跟子組件定義的 ref 值一模一樣，否者會關(guān)聯(lián)失效）
const RefTestComponent = ref(null)
// 延遲使用，因為還沒掛載
nextTick(() => {
  RefTestComponent.value.show()
})
</script>

到此這篇關(guān)于Vue3 父組件調(diào)用子組件方法（$refs 在setup()、＜script setup＞ 中使用）的文章就介紹到這了,更多相關(guān)Vue3 父組件調(diào)用子組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論