vue3的api解读 - ref和expose

目录

ref引用组件

expose暴露方法

---

父子组件交互能力

ref引用组件

• ref是vue的一种reactive值
  • 代表的是一个引用
  • 例如：引用某个数值、对象......
  • 例如：引用某个组件
• Coding

import { defineComponent, ref, watch } from "vue"
export const ExposeExamplese01 = defineComponent({
  setup() {
    const ipt = ref(null)
    watch(ipt, () => {
      if (ipt.value) {
        ipt.value.value = "hello"
        ipt.value.focus()
      }
    })
    return () => {
      return 
    }
  }
})

expose暴露方法

import { defineComponent, ref, watch } from "vue"
export const ExposeExamplese02 = defineComponent({
  setup() {
    const someRef = ref(null)
    watch(someRef, () => {
      if (someRef.value) {
        // console.log(someRef.value) // A 
A组件
        console.log(someRef.value) // B Proxy {…}
        console.log(someRef.value.div) // B 
B组件
      }
    })
    return () => {
      // return 
      return 
    }
  }
})
const A = () => {
  return 
A组件
}
const B = defineComponent({
  setup(props, { expose }) {
    const divRef = ref(null)
    expose({
      foo: "bar",
      text() {
        console.log('text me!')
      },
      div: divRef
    })
    return () => {
      return 
B组件
    }
  }
})