Vue 将功能组件转换为 Vue 3

Question

我想将我的 Vue 2 功能组件迁移到 Vue 3。我看了他们的官方 docs 但不明白。

例如我有这个组件：

module.exports = (name, path, ariaLabel) => `<template functional>
  <div
    :class="['main-${name}', props.width ? 'default-width' : undefined]"
  >
  <span  v-if="title">${title}</span>
  <span> hello </span>
  </div>
</template>

<script>
export default {
  name: 'test-${name}',
  props: {
    width: {
      type: [Number, String],
      default: null
    },
    title: {
      type: String,
      required: false
    },
  }
}
</script>
<style src="./style.css"/>
`

我已经转换到 Vue 3 了：

import { h } from 'vue'

const MyComponent = (props, context) => {
    return h(`div${props.name}`, context.attrs, context.slots)
}

MyComponent.props = {
    width: {
        type: [Number, String],
        default: null
    },
    title: {
        type: String,
        required: false
    },
}

import styles from './style.css';

export default MyComponent;

如何正确导入 CSS？我将如何添加嵌套跨度和 类?

Answer 1

样式

可以将外部 CSS 文件导入文件，这些样式将自动应用于组件：

import './MyComponent.css'

props.name

您正在使用未声明的 props.name，因此请务必将其添加到 props:

MyComponent.props = {
  //...
  name: {
    type: String,
    required: true,
  },
}

h() Arguments

1. h() 的第二个参数是一个属性对象，其中包括 class，因此您将在 class 键下传递多个 class 名称。
2. h()的第三个参数可以是字符串、槽或子元素数组，它们也是用h()创建的，所以你可以嵌套<span>s通过将它们传递到数组中。

import { h } from 'vue'

const MyComponent = ({ name, width, title }) =>
  h(
    'div',

    // 1
    {
      class: `main-${name} ${width && 'default-width'}`
    },

    // 2
    [
      title && h('span', null, title), // conditional on `title`
      h('span', null, ' hello ')
    ]
  )

demo

JSX

使用 Vue CLI 生成的项目也 support JSX 开箱即用，鉴于它与原始 HTML 的接近程度，这可能会更直接。这是上面 h() 调用的等价物：

const MyComponent = ({ name, width, title }) =>
  <div class={`main-${name} ${width && 'default-width'}`}>
    {title && <span>{title}</span>}
    <span> hello </span>
  </div>