Vue3 defineExpose要在方法聲明定義以后使用的教程

更新時間：2023年02月18日 10:11:46 作者：feixianxing

這篇文章主要介紹了Vue3 defineExpose要在方法聲明定義以后使用的教程,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

[Vue3] defineExpose要在方法聲明定義以后使用

Vue3中的setup默認是封閉的，如果要從子組件向父組件暴露屬性和方法，需要用到defineExpose.

和defineProps, defineEmits一樣，這三個函數(shù)都是內(nèi)置的，不需要import.

不過defineProps, defineEmits都會返回一個實例，而defineExpose是無返回值的.

const props = defineProps({})
const emit = defineEmits([])
defineExpose({})

defineExpose的使用

子組件Child.vue

<template>
	{{ name }}
</template>

<script setup>
import { ref } from 'vue'

const name = ref("Nicholas.")
const sayName = ()=>{
    console.log("my name is "+name.value)
}

defineExpose({
	name,
	sayName
});
</script>

父組件Father.vue

<template>
	<Child ref="child"></Child>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const child = ref(null)
onMounted(()=>{
    console.log(child.value.name)	// "Nicholas"
    child.value.sayName()			// "my name is Nicholas"
})
</script>

總結(jié)

向外暴露的時候變量會自動解包，比如上面子組件的name:ref<String>暴露到父組件的時候自動變成了name:String.

注：defineExpose一定要在變量和方法聲明定義之后再使用。

不知道以后會不會有修改，不過在2023/02/17，如果defineExpose寫在變量和函數(shù)前面，那么瀏覽器的控制臺會輸出很多警告，并且最終將該頁面卡死。

擴展：vue3 defineExpose

vue3使用 setup 語法糖后如何在父組件用ref調(diào)用子組件的方法

什么是setup語法糖

更少的樣板內(nèi)容，更簡潔的代碼。
能夠使用純 Typescript 聲明 props 和拋出事件。
更好的運行時性能 (其模板會被編譯成與其同一作用域的渲染函數(shù)，沒有任何的中間代理)。

//要使用這個語法，需要將 setup attribute 添加到 <script> 代碼塊上：
<script setup>
console.log('hello script setup')
//里面的代碼會被編譯成組件 setup() 函數(shù)的內(nèi)容。這意味著與普通的 <script> 只在組件被首次引入的時候執(zhí)行一次不同，<script setup> 中的代碼會在每次組件實例被創(chuàng)建的時候執(zhí)行。
</script>

當我們的組件使用這種語法時，是不可以用setup（）這種語法的寫法獲取子組件的數(shù)據(jù)或方法
為了在 script setup 組件中明確要暴露出去的屬性，使用 defineExpose 編譯器宏：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
//當父組件通過模板 ref 的方式獲取到當前組件的實例，獲取到的實例會像這樣 { a: number, b: number } (ref 會和在普通實例中一樣被自動解包)

</script>

下面是vue3 使用setup（）后父組件獲取子組件的方法

1、父組件

template中

<Table ref="eleTable" @handle="handleFun"></Table>
import {  ref  } from 'vue'

2、子組件

setup() { 
   //ref方法
    const eleTable = ref()  //eleTable是頁面ref后面對應(yīng)的名字
    const clickSon = () => {
      eleTable.value.changeShowText() //調(diào)用子組件的方法
      let arr = eleTable.value.tableData //獲取子組件 setup 里面定義的變量
    }
}

使用語法糖之后的寫法

父組件

<FastreplySettingTable
              ref="FastreplySettingTableRef"
              v-if="sysStore.msgList"
              :groupType="Math.abs(state.currentTab - 1)"
              :currentTab="state.currentTab"
            ></FastreplySettingTable>


<script>
   const FastreplySettingTableRef = ref();
   
   //該方法是一個點擊事件
   function sendEvent(action) {
     if (FastreplySettingTableRef) {
     //拿到FastreplySettingTableRef組件里的dispatchEvent方法 并且穿一些參數(shù)
    FastreplySettingTableRef.value.dispatchEvent({ action, groupType: Math.abs(state.currentTab - 1) })
  }
}
</script>

子組件

import {
  getCurrentInstance,
  onMounted,
  reactive,
  onBeforeUnmount,
  defineProps,
  defineEmits,
  computed,
  onBeforeMount,
  onUnmounted,
  watch,
  ref,
  //這里必須引入
  defineExpose
} from "vue";
// 希望被父組件調(diào)用到的方法
//這個方法必須寫在defineExpose 上面才會生效
const dispatchEvent = ({ action, groupType }) => {
  switch (action) {
    case 'tabClick': {
      state.searchKeyword = '',
        state.activeGroup = 'all'

    }; break;
    case 'addfastMsg': {
      //上報
      openMask('addfastMsg');
      // state.DialogTitle = state.groupType ? "快捷消息管理-添加團隊內(nèi)容" : "快捷消息管理-添加個人內(nèi)容"
      // spiderReport.paq(props.groupType ? "快捷消息管理-添加團隊內(nèi)容" : "快捷消息管理-添加個人內(nèi)容");
    }; break;
    default: {
      // state.[action](groupType);
    }
  }
}
defineExpose({
  dispatchEvent
})

到此這篇關(guān)于Vue3 defineExpose要在方法聲明定義以后使用的教程的文章就介紹到這了,更多相關(guān)Vue3 defineExpose內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: