JSX Vue

JSX Vue

jsx中 sync 写法

Home.tsx

import MyComponent from './myComponent.tsx'

export default class OrganizationManagement extends Vue {

	<MyComponent 
	  province={this.province}
	  {...{
	    on: {
	      'update:province': (val: string) => this.province = val,
	      
	    }
	  }}
	/>
}

使用 on 扩展监听值的变化，然后重新赋值。

myComponent.tsx

import { Component, Vue, Prop, PropSync } from 'vue-property-decorator'

@Component({})
export default class AddressSelect extends Vue {
  @PropSync('province', {}) private syncProvince!: string

  protected render(h: any) {
    return (
    	<el-select v-model={this.syncProvince}>
          ...
       </el-select>
    )
  }
}

回顾 .sync
sync的非语法糖写法
<comp :foo="bar" @update:foo="val => bar = val"></comp>
等同于：<com :foo.sync="bar"/>

Attributes/Props

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

with a dynamic binding:

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

with the spread operator (object needs to be compatible with Vue Data Object):

render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
  }

  return <input {...{ attrs: inputAttrs }} />
}

参考

📚 vue-jsx Github