vue的JSX写法

# vue3的JSX写法

# 函数式组件

const App = () => <div></div>;

# 赋值

const msg = '阿离王'
const App = () => <div> { msg } </div>

1
2

# 定义事件

const showText = (msg) => { console.log(msg) }

const App = (msg) => <div>
    <div onClick={ showText }></div>
    <div onClick={ () => { showText(msg) } }></div>
</div>;

1
2
3
4
5
6

# 在 render 中使用

const App = {
  render() {
    return <div>Vue 3.0</div>;
  },
};

1
2
3
4
5

import { withModifiers, defineComponent } from "vue";

const App = defineComponent({
  setup() {
    const count = ref(0);

    const inc = () => {
      count.value++;
    };

    return () => (
      <div onClick={withModifiers(inc, ["self"])}>{count.value}</div>
    );
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Fragment(片段)

const App = () => (
  <>
    <span>I'm</span>
    <span>Fragment</span>
  </>
);

1
2
3
4
5
6

# Attributes / Props

const App = () => <input type="email" />;

动态绑定:

const placeholderText = "email";
const App = () => <input type="email" placeholder={placeholderText} />;

1
2

# 指令

# v-show

const App = {
  data() {
    return { visible: true };
  },
  render() {
    return <input v-show={this.visible} />;
  },
};

1
2
3
4
5
6
7
8

# v-model

<input v-model={val} />

<input v-model={[val, ["modifier"]]} />

<input v-model:argument={val} />

<A v-model={[val, "argument", ["modifier"]]} />

1
2
3
4
5
6
7

以上四种写法都可以，下面两种 argument 意思是别名

v-model:argument={val}语法糖=> :argument={ argument } @update:argument={ val => argument = val } $emit('update:argument', 123)

<A v-model={[val, "argument", ["modifier"]]} /> 会编译成

h(A, {
  argument: val,
  argumentModifiers: {
    modifier: true,
  },
  "onUpdate:argument": ($event) => (val = $event),
});

1
2
3
4
5
6
7

# 自定义指令

只有 argument 的时候推荐使用

const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom:arg={val} />;
  },
};

1
2
3
4
5
6

const App = {
  directives: { custom: customDirective },
  setup() {
    return () => <a v-custom={[val, "arg", ["a", "b"]]} />;
  },
};

1
2
3
4
5
6

# 插槽

注意: 在 jsx 中，应该使用 v-slots 代替 v-slot

const A = (props, { slots }) => (
  <>
    <h1>{ slots.default ? slots.default() : 'foo' }</h1>
    <h2>{ slots.bar?.() }</h2>
  </>
);

const App = {
  setup() {
    const slots = {
      bar: () => <span>B</span>,
    };
    return () => (
      <A v-slots={slots}>
        <div>A</div>
      </A>
    );
  },
};

// or

const App = {
  setup() {
    const slots = {
      default: () => <div>A</div>,
      bar: () => <span>B</span>,
    };
    return () => <A v-slots={slots} />;
  },
};

// 或者，当 `enableObjectSlots` 不是 `false` 时，您可以使用对象插槽
const App = {
  setup() {
    return () => (
      <>
        <A>
          {{
            default: () => <div>A</div>,
            bar: () => <span>B</span>,
          }}
        </A>
        <B>{() => "foo"}</B>
      </>
    );
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 在 TypeScript 中使用

tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

1
2
3
4
5

# 兼容性

要求：

Babel 7+
Vue 3+

官方文档 Vue 3 Babel JSX 插件 (opens new window)

编辑

← Vue常用技巧 vue防抖组件→