vue3 使用 jsx

vue3 使用 jsx,第1张

<script lang="tsx">
import {defineComponent, ElSelect, ElOption } from 'element-plus'
import { ref, reactive } from 'vue'
import { map } from 'lodash-es'

let selectionValue = ref('子应用')

const selectionOptions = reactive([
  {
    value: '子应用1',
    label: '子应用1'
  },
  {
    value: '子应用2',
    label: '子应用2'
  },
  {
    value: '子应用3',
    label: '子应用3'
  },
  {
    value: '子应用4',
    label: '子应用4'
  }
])
export default defineComponent({
  name: 'ToolHeader',
  setup() {
    return () => (
		<ElSelect
            v-model={selectionValue.value}
            filterable
            placeholder="请输入应用"
            class="w-50%"
          >
            {map(selectionOptions, (item, key) => (
              <ElOption value-key={key} label={item.label} value={item.value} />
            ))}
		ElSelect>
    )
  }
})

注意:
.vue文件可以直接赋值, 但 jsx中不能这样直接赋值

在jsx中里面需要通过修改 selectionValue.value 的值,可以触发模板的重新渲染,

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1321022.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存