<template>
    <p>Counter: {{ counter }}</p>

    <button @click="reset">Reset</button>
    <button @click="terminate">??</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const counter = ref(0)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      clearInterval(interval)
    }

    return {
      counter,
      reset,
      terminate
    }
  }
}
</script>

從組合的角度來看，我希望父級(jí)組件能夠在需要時(shí)直接調(diào)用reset?方法--但我希望保持terminate? 函數(shù)和 counter 的引用只對(duì)組件可用。

如果我們把這個(gè)組件實(shí)例化到一個(gè)父類中，例如 App.vue，并給它附加一個(gè) ref 引用，我們可以很容易地讓父類調(diào)用 reset? 方法，因?yàn)楫?dāng)我們從 setup? 中返回它時(shí)，它已經(jīng)和 terminate 一起被暴露了。

App.vue

<template>
  <MyCounter ref="counter" />

  <button @click="reset">Reset from parent</button>
  <button @click="terminate">Terminate from parent</button>
</template>

<script>
import MyCounter from '@/components/MyCounter.vue'

export default {
  name: 'App',
  components: {
    MyCounter
  },
  methods: {
    reset () {
      this.$refs.counter.reset()
    },
    terminate () {
      this.$refs.counter.terminate()
    }
  }
}
</script>

如果現(xiàn)在運(yùn)行這個(gè)，并單擊重置或終止按鈕，兩者都可以工作。

讓我們明確說明我們要向父類暴露(expose?)的內(nèi)容，以便只有 reset 函數(shù)可用。

MyCounter.vue

<script>
import { ref } from 'vue'
export default {
  setup (props, context) {
    const counter = ref(null)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      console.log(interval)
      clearInterval(interval)
    }

    context.expose({ reset })

    return {
      counter,
      reset,
      terminate
    }
  }
}
</script>

這里，我們?cè)趕etup?函數(shù)中加入了 props? 和 context? 參數(shù)。我們需要有可用的上下文，因?yàn)檫@是 expose? 函數(shù)的位置。我們也可以像這樣使用重構(gòu): { expose }。

接下來，我們使用 context.expose? 來聲明一個(gè)我們想要向?qū)嵗@個(gè)組件的父類公開的元素對(duì)象；在這個(gè)例子中，我們只打算讓 reset 功能可用。

如果我們?cè)俅芜\(yùn)行這個(gè)例子，并點(diǎn)擊 "Terminate from parent" 按鈕，我們會(huì)得到一個(gè)錯(cuò)誤。

Uncaught TypeError: this.$refs.counter.terminate is not a function

terminate 功能不再可用，我們的私有API現(xiàn)在也無法訪問了。

選項(xiàng)API

上面我們?cè)?nbsp;composition API? 使用 exponse，但在options API中也可以使用這個(gè)方法。我們可以把它改寫成如下。

//  MyCounter.vue
export default {
  created () { ... },
  data: () => ({ counter: null }),
  methods: {
    reset () { ... },
    terminate () { ... }
  },
  expose: ['reset']
}

注意，我們添加了一個(gè)新的選項(xiàng)API屬性expose?，允許我們傳入一個(gè)數(shù)組，其中字符串'reset'是我們公開的函數(shù)的名稱。

組合API 渲染功能

創(chuàng)建一個(gè)強(qiáng)大臉靈活的組件的方法是利用渲染函數(shù)的力量。這對(duì)Vue 3來說并不新鮮，但是隨著composition API的建立，我們現(xiàn)在可以靈活地從setup?方法中直接返回組合API h 函數(shù)。

這就產(chǎn)生了一個(gè)問題，因?yàn)樵谖覀兊膕etup?函數(shù)中，整個(gè)return?語(yǔ)句只是包含組件正在創(chuàng)建的節(jié)點(diǎn)的 h 方法。

如果在這個(gè)時(shí)候我們選擇向父類 expose 一些東西，我們就會(huì)遇到與我們之前看到的相反的問題。沒有任何東西被暴露，因?yàn)槌薉OM元素，沒有任何東西被返回。

讓我們重寫 MyCounter.vue 組件來使用這個(gè)方法。

<script>
// The template has been deleted
import { ref, h } from 'vue'

export default {
  setup (props, context) {
    const counter = ref(0)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      clearInterval(interval)
    }

    // context.expose({ reset })

    return () => h('div', [
      h('p', `Counter: ${counter.value}`),
      h('button', { onClick: reset }, 'Reset'),
      h('button', { onClick: terminate }, 'Terminate')
    ])
  }
}
</script>

注意，我們?cè)陧敳繌腣ue導(dǎo)入了 h，因?yàn)槲覀冃枰盟鼇韯?chuàng)建我們的DOM元素。

為了說明問題，暫時(shí)注釋了context.expose方法。

現(xiàn)在的 return 語(yǔ)句復(fù)制了我們之前的 <template> 的DOM結(jié)構(gòu)，如果我們運(yùn)行這個(gè)例子，我們能夠正確點(diǎn)擊元素上的重置和終止按鈕。

然而，如果我們現(xiàn)在點(diǎn)擊 "Reset from parent"按鈕，我們會(huì)遇到一個(gè)錯(cuò)誤。