Vue JSX使用Demo（注：在.vue或者.jsx檔案的使用方法都是一樣的）

如下功能JSX寫法：

• v-show
• v-if
• v-for
• slots
• scopedSlots
• props
• attrs
• on
• render小元件的使用（ComponentB）

<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} style="width:200px" />
            <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 lang="less" scoped>
</style>

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>