写点什么

vue2 升级 vue3: 单文件组件概述 及 defineExpos/expose

作者:zhoulujun
  • 2022 年 7 月 25 日
  • 本文字数:1729 字

    阅读完需:约 6 分钟

像我这种 react 门徒被迫迁移到 vue 的,用管了 TSX,地 vue 单文件组件也不太感冒,但是 vue3 单文件组件,造了蛮多 api ,还不得去了解下

https://v3.cn.vuejs.org/api/sfc-script-setup.html#单文件组件-script-setup

definePropsdefineEmits 没有什么好说的,就是 setup 中定义 props 与 emits。

useSlotsuseAttrs 它会返回与 setupContext.slots 和 setupContext.attrs

export default defineComponent({  name: 'RefreshInterval',  props: {//defineProps    refreshFun: {      type: Function,    },  },  emits: ['change'],// defineEmits  setup(props, { slots,attrs }) {//useSlots、useAttrs   }})
复制代码

其中比较迷惑的地方就是 defineexpose:

defineExpose

首先看官方文档:

https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose

使用 <script setup> 的组件是默认关闭的,也即通过模板 ref 或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定

为了在 <script setup> 组件中明确要暴露出去的属性,使用 defineExpose 编译器宏:

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

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板 ref 的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

翻译成大白话就是:子组件是<script setup>声明时,父组件(非<script setup>)是不能直接访问子组件的方法,需要子组件手动的抛出才行。即:refChildren.value.children.props 是无效的。

expose

官方文档:https://staging-cn.vuejs.org/api/options-state.html#expose

默认情况下,当通过 $parent、$root 或模板 refs 访问时,组件实例将向父组件暴露所有的实例 property。这可能不是我们希望看到的,因为组件很可能拥有一些应保持私有的内部状态或方法,以避免紧耦合。

expose 选项期望一个 property 名称字符串的列表。当使用 expose 时,只有显式列出的 property 将在组件实例上暴露

expose 仅影响用户定义的 property——它不会过滤掉内置的组件实例 property。

export default {
  // 只有 `publicMethod` 在公共实例上可用
  expose: ['publicMethod'],
  methods: {
    publicMethod() {
      // ...
    },
    privateMethod() {
      // ...
    }
  }
}


使用 expose 函数来控制组件被 ref 时向外暴露的对象内容,借此来维护组件的封装性

其实把它理解为 React 函数组件 中的 useImperativeHandle 就行!

子组件利用 useImperativeHandle 可以让父组件输出任意数据。

// FancyInput组件作为子组件
const FancyInput = React.forwardRef(function FancyInput(props, ref) {
  const inputRef = useRef();

  // 命令式的给`ref.current`赋值个对象
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus()
    }
  }));
  
  return <input ref={inputRef} ... />
})

// Example组件作为父组件
function Example() {
  const fancyInputRef = useRef()

  const focus = () => {
    fancyInputRef.current.focus()
  }

  return (
    <>
      <FancyInput ref={fancyInputRef} />
    </>
  )
}


更多的,可以查看:Vue3 源码解析(九):setup 揭秘与 expose 的妙用  https://segmentfault.com/a/1190000040179961


参考文章:

vue3-什么是 expose,是如何使用的,以及 defineExpose 的用法 https://blog.csdn.net/vet_then_what/article/details/125515694

Vue3 中的 expose 函数 https://juejin.cn/post/6943950109268770830

最陌生的 hooks: useImperativeHandle https://segmentfault.com/a/1190000040758640

useRef、useImperativeHandle https://www.jianshu.com/p/20aa551e44e7


转载本站文章《vue2升级vue3:单文件组件概述 及 defineExpos/expose》,请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8872.html

发布于: 刚刚阅读数: 4
用户头像

zhoulujun

关注

还未添加个人签名 2021.06.25 加入

还未添加个人简介

评论

发布
暂无评论
vue2升级vue3:单文件组件概述 及 defineExpos/expose_Vue3_zhoulujun_InfoQ写作社区