frost-zx.github.io/docs/content/vue-jsx-syntax.md

title, date, lastmod, tags

title	date	lastmod	tags
「Web 前端」在 Vue 中使用 JSX 的语法	2025-03-15T23:05:31Z	2025-10-07T16:10:57Z	Web 前端 JavaScript JSX Vue.js

「Web 前端」在 Vue 中使用 JSX 的语法

来源

• GitHub - vuejs/jsx

语法

内容（Content）

render() {
  return <p>hello</p>;
}

动态内容：

render() {
  return <p>hello { this.message }</p>;
}

使用自闭合标签：

render() {
  return <input />;
}

使用组件：

import MyComponent from './my-component';

export default {
  render() {
    return <MyComponent>hello</MyComponent>;
  },
}

Attributes / Props

render() {
  return <input type="email" />;
}

动态绑定：

render() {
  return <input
    type="email"
    placeholder={this.placeholderText}
  />;
}

使用 “展开” 操作符：

传递的对象需要与 深入数据对象 相匹配。

render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email',
  };
  return <input {...{ attrs: inputAttrs }} />;
}

插槽（Slots）

具名插槽：

render() {
  return (
    <MyComponent>
      <header slot="header">header</header>
      <footer slot="footer">footer</footer>
    </MyComponent>
  );
}

作用域插槽：

render() {
  const scopedSlots = {
    header: () => <header>header</header>,
    footer: () => <footer>footer</footer>,
  };
  return <MyComponent scopedSlots={scopedSlots} />;
}

指令（Directives）

<input vModel={this.newTodoText} />

使用修饰符（modifier）：

<input vModel_trim={this.newTodoText} />

使用参数（argument）：

<input vOn:click={this.newTodoText} />

同时使用参数和修饰符：

<input vOn:click_stop_prevent={this.newTodoText} />

v-html：

<p domPropsInnerHTML={html} />

函数式组件（Functional Components）

渲染函数 & JSX - 函数式组件

export default ({ props }) => (<p>hello {props.message}</p>);

const HelloWorld = ({ props }) => (<p>hello {props.message}</p>);

‍