MENU

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

2020 年 09 月 20 日 • 开发

来源

语法

内容(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>);
最后编辑于: 2022 年 05 月 26 日
返回文章列表 打赏
本页链接的二维码
打赏二维码