vue JSX使用案例

备注：Vue JSX语法在.vue或者.jsx文件中使用方法都是一样的

概要：

• v-model（可直接食用，必须是引用类型（v-model={xxxObj.xxxProperty}），如果不是，请加上this（v-model={this.xxxProperty}））
• v-show（可直接食用）
• v-if（ 需要转为js，三元表达式，or，var && <ComponentXXX /> ）
• v-for（需要转为js map函数，同时注意map返回的组件，要加key）
• style = {}
• class= [] || {}
• directives = []
• key = String || Number （map 返回的组件要加）
• ref = String （组件or dom元素 的引用）
• slots (写在组件内部，<Component><div slot="xxxName" /></Component>）
• scopedSlots（scopedSlots={ scopedSlotsName: Function }）
• props （单个属性：propertyXXX={xxx}，多个属性：就是props = {xxx}，后者覆盖前面的）
• domProps = {}( 如：innerHTML)
• model (特别注意，model不能作为单个属性传递，会报错，要传model，用props={ model: xxx })，model是VUE的特殊属性
• attrs（attrs={xxx}）
• on 监听组件事件（单个on【FunctionName】（onChange={this.onChange}），or，on: { onChange: this.onChange}）
• nativeOn 监听原生事件（单个nativeOn【FunctionName】,多个：nativeOn: {}，和on类似）
• 指令（不能使用：var | fitlerFn， 只能使用函数包裹：filterFn(var, ...otherParam)，filterFn必须是methods里面定义）
• render小组件的使用（ComponentB）

以下是一个JSX例子

<script type="text/jsx">
import ComponentA from "./ComponentA";
const ComponentB = {
  render() {
    return <div>ComponentB</div>
  }
}
export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      input: '',
      visible: true,
      show: false,
      list: ['北京', '天津', '上海', '广州', '深圳', '重庆']
    }
  },
  mounted() {
    console.log(this.$refs);
  },
  render() {
    const change = (e) => {
      console.log('change print', e)
    }
    return(
        <div>
          <div>
            <span>v-model的使用</span>
            <a-input  v-model={this.input}  />
            <span>{ this.input }</span>
          </div>
          <div>
            { this.visible && <span>v-if</span> }
          </div>
          <div>
            <span>v-show的使用</span>
            <span v-show={this.show}>v-show</span>
          </div>
          <div>
            <span>v-for的使用，以及key的使用，尽管不会报错，还是要加上</span>
            { this.list.map(v => (<span key={v}>{v}，</span>))}
          </div>
          <div>
            <span>组件传值，监听事件，以及slots，scopedSlots插槽等，以及小组件render的使用（ComponentB）组件</span>
            <ComponentA
                ref="ComponentA"
                msg="hello word"
                props={{userName: '张三'}}
                attrs={{age: 18}}
                scopedSlots={{
                  content: ({ sex }) => {
                    return <div>{ sex }</div>
                  }
                }}
                on={{
                  change: change
                }}
            >
              <ComponentB
                slot="default"
              />
              <div slot="header">header slot</div>
              <div slot="footer">footer slot</div>
            </ComponentA>
          </div>

        </div>
    )
  }
}
</script>

<style  scoped>
</style>

备注：<ComponentB 的 slot = "default" 可省略

ComponentA代码：

<script type="text/jsx">
export default {
  props: ['msg', 'userName'],
  render() {
    return <div>
      { this.$slots.default }
      { this.$slots.header }
      { this.$scopedSlots.content({ sex: '男'}) }
      { this.$slots.footer }
    </div>
  }
}
</script>