宏函数

宏是一些特殊的函数，它们只在编译时具有意义，它们是 Vine 编译器转换相应组件属性的提示。

这一解决方式的基本思想就是通过在源代码中使用特定的函数，方便在编译期识别出来，然后转换成想要的任何操作。

这些宏的类型定义可以在 我们的 Github 仓库 中找到。

vineEmits

为组件定义 emits，用法与官方版本基本一致。

该宏没有参数，并返回 emits 函数，您必须定义一个变量来接收返回值。

这个类型参数的语法与 Vue 3.3 更简洁的语法相同，请查阅官方文档了解更多细节。

const myEmit = vineEmits<{
  update: [foo: string, bar: number]
}>()

myEmit('update', 'foo', 1)

vineExpose

这个宏的使用方法与官方 defineExpose 宏完全一致。

请在 Vue.js 官方文档的相应部分中查看描述。

vineSlots

这个宏的使用方法与官方 defineSlots 宏完全一致。

请在 Vue.js 官方文档的相应部分中查看描述。

vineOptions

此宏仅支持您定义 2 个重要的 Vue 组件选项：name 和 inheritAttrs。

vineOptions({
  name: 'MyComponent',
  inheritAttrs: false
})

vineStyle

🧩 建议

由于样式代码一写起来就会非常长，因此其实作者并不推荐使用这个宏，而是推荐你采用类似 UnoCSS、TailwindCSS 等原子化 CSS 方案或是导入外部样式表。

这是一个用于定义样式的宏，替代了 SFC 的 <style> 块。如果您的组件需要 scoped，可以使用 vineStyle.scoped。

在 VCF 外部不允许调用 vineStyle，在一个 VCF 中可以调用多次，因为你可能在组件中想要同时提供 scoped 和非 scoped 样式。

您还可以指定任何您想要的 CSS 处理器语言，查看下面的示例：

vineStyle(scss`
  .foo {
    color: red;
    .bar {
      background: yellow;
    }
  }
`)

如果你希望引入一个外部的样式文件，可能你会选择如下的方式：

import '~/styles/some-style.less'

但如果你想要该样式文件是带 scoped 作用的，可以这样使用 vineStyle 宏：

vineStyle.import('~/styles/some-style.less').scoped()

它等价于在 SFC 中这样写：

<style scoped src="~/styles/some-style.less"></style>