vue3如何使用defineExpose

1. defineExpose是做什么的

defineExpose是Vue 3新增的一个API，用于使组件实例中的某些方法或属性在模板中可以被访问到。在Vue 2中，组件内的方法和属性都是私有的，只能在组件内部访问到，但是在Vue 3中，defineExpose可以在组件实例中暴露一个API，使得其他组件或者模板可以访问到组件实例的数据或者方法，从而实现组件之间的通信或者数据共享。

  
    // 组件内部使用
    export default {
      data () {
        return {
          message: 'Hello Vue 3!'
        }
      },
      methods: {
        showMessage () {
          console.log(this.message)
        }
      }
    }

    // 组件实例中使用defineExpose
    import { defineExpose } from 'vue'
    export default {
      setup () {
        const message = 'Hello Vue 3!'
        const showMessage = () => {
          console.log(message)
        }
        defineExpose({
          message,
          showMessage
        })
      }
    }

    // 手动获取组件实例并访问
    import { ref, onMounted } from 'vue'
    export default {
      setup () {
        const componentRef = ref(null)
        onMounted(() => {
          console.log(componentRef.value.message)
          componentRef.value.showMessage()
        })
        return { componentRef }
      }
    }
  

2. defineExpose如何使用

在Vue 3中，我们可以在setup函数中通过使用defineExpose暴露组件实例中的方法和属性。

  
    import { defineComponent, defineExpose } from 'vue'

    export default defineComponent({
      setup () {
        const title = 'This is title'
        const author = 'John'

        const getTitle = () => {
          return title
        }

        const getAuthor = () => {
          return author
        }

        defineExpose({
          getTitle,
          getAuthor
        })

        return {
          title,
          author
        }
      },
      template: `
        

          
{{ title }}
          
Author: {{ author }}
        
      `
    })
  

3. defineExpose与provide/inject结合使用

在Vue 3中，我们可以使用provide/inject组合与defineExpose一起使用，共享组件内部的数据和方法。

  
    // Grandfather.vue
    import { provide, defineComponent } from 'vue'
    import Father from './Father'

    export default defineComponent({
      setup () {
        const title = 'This is title from grandfather component'

        provide('title', title)

        return {
          title
        }
      },
      template: `
        

          
{{ title }}
          
        
      `
    })

    // Father.vue
    import { inject, defineComponent } from 'vue'
    import Son from './Son'

    export default defineComponent({
      components: { Son },
      setup () {
        const title = inject('title')

        return {
          title
        }
      },
      template: `
        

          
{{ title }}
          
        
      `
    })

    // Son.vue
    import { defineComponent, defineExpose } from 'vue'

    export default defineComponent({
      setup () {
        const message = 'This message from son component'

        const showMessage = () => {
          console.log(message)
        }

        defineExpose({
          message,
          showMessage
        })

        return {
          message,
          showMessage
        }
      },
      template: `
        

          Show Message
        
      `
    })
  

4. defineExpose和子组件的通信

在Vue 3中，通过使用defineExpose，父组件通过refs可以获取子组件的实例，实现与子组件的通信。

  
    // Father.vue
    import { defineComponent, ref } from 'vue'
    import Son from './Son'

    export default defineComponent({
      components: { Son },
      setup () {
        const componentRef = ref(null)

        const getMessage = () => {
          console.log(componentRef.value.message)
          componentRef.value.showMessage()
        }

        return {
          componentRef,
          getMessage
        }
      },
      template: `
        

          
          Get Message from Son
        
      `
    })

    // Son.vue
    import { defineComponent, defineExpose } from 'vue'

    export default defineComponent({
      setup () {
        const message = 'This message from Son component'

        const showMessage = () => {
          console.log(message)
        }

        defineExpose({
          message,
          showMessage
        })

        return {
          message,
          showMessage
        }
      },
      template: `
        

          
{{ message }}
        
      `
    })