setup中expose的用法

子组件：childrenFile.vue

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup (props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value
    // 将increment 方法暴露给父组件，个人测试expose只能暴露方法
    expose({
      increment
    })
    return {
      count
    }
  }
}
</script>

父组件：parentsFile.vue

<template>
  <div>{{ title }}</div>
  <button @click="btnClick()">点击</button>
  <childeData ref="count"></childeData>
</template>

<script>
import { ref } from 'vue'
import childeData from './childrenFile.vue'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    childeData
  },
  setup () {
    // 定义ref的值需要与父组件引用子组件中的ref保持一致
    const count = ref();
    const title  = ref('我是标题')
    const btnClick = () => {
      // 调用子组件中的increment方法
      count.value.increment();
    }
    return {
     count, btnClick, title
    }
  }
}
</script>

ref="count"

在虚拟 DOM 补丁算法中，如果 VNode 的 ref 键对应于渲染上下文中的 ref，则 VNode 的相应元素或组件实例将被分配给该 ref 的值。这是在虚拟 DOM 挂载/打补丁过程中执行的，因此模板引用只会在初始渲染之后获得赋值。