Vue+JSX使用教程例子

Props

傳遞參數

/src/Demo.vue 子組件

<script>
export default {
  props: ["msg"],
  render() {
    return (
      <div>
        <p>子組件</p>
        <p>msg: {this.msg}</p>
      </div>
    );
  }
};
</script>

/src/App.vue 父組件

<script>
import Demo from "./Demo";
export default {
  data() {
    return {
      msg: "default"
    };
  },
  render() {
    return (
      <div>
        <p>父組件</p>
        <hr />
        <Demo msg={this.msg} />
      </div>
    );
  }
};
</script>

使用JSX編寫以後，你會發現以上對比之前的寫法，好像缺乏了components這個配置項。
是的，JSX上你徹底不用配置compoents，直接寫上去就行，這是我比較喜歡的

以上簡單的參數傳遞（單向綁定）想必你們都能懂，但如何實現雙向綁定呢？

綁定事件

src/App.vue 父組件

<script>
import Demo from "./Demo";
export default {
  data() {
    return {
      msg: "default"
    };
  },
  methods: {
    handleOnInput(e) {
      // 子組件 input的事件回調
      // 實現 改變msg值
      this.msg = e.target.value;
    }
  },
  render() {
    return (
      <div>
        <p>父組件</p>
        <p>msg: {this.msg}</p>
        <hr />
        <Demo msg={this.msg} handleChange={this.handleOnInput} />
      </div>
    );
  }
};
</script>

<Demo handleChange={ this.handleOnInput} />

子組件的handleChange props值與父組件 handleOnInput綁定

/src/Demo.vue 子組件

<script>
export default {
  props: ["msg", "handleOnChange"],
  render() {
    return (
      <div>
        <p>子組件</p>
        <p>msg: {this.msg}</p>
        
        <!--onInput被觸發時，交由父組件事件處理-->
        <input value={this.msg} onInput={this.handleChange} />

      </div>
    );
  }
};
</script>

props:["handleOnChange"] 事件必需要配置

<input onInput={this.handleChange} />
當輸入框觸發onInput事件時，交由父組件的事件處理

其實JSX雙向綁定就是從原生事件中獲取到值以後賦值到對應的變量中，從而達到v-model的效果

傳遞組件

/src/components/HelloWorld.vue

export default {
    render() {
      return (
          <div>Hello</div>
      );
    }
}

/src/Demo.vue

export default {
    props: ["component"],
    render(h) {
      return (
          <div>
              <p>子組件</p>
              
              <!--父組件傳入來的組件-->
              { h(this.component) }
          </div>
      );
    }
}

/src/App.vue

import HelloWorld from './components/HelloWorld'
import Demo from './Demo'
export default {

    render(h) {
      return (
          <div>
              <p>父組件</p>
              
              <!--向子組件傳入組件-->
              <Demo component={HelloWorld} />
          </div>
      );
    }
}

經過props方式，把一個組件傳入到子組件中渲染

利用render(h)的h實現渲染

組件庫事件綁定

當使用組件庫開發的時候，事件名稱若是有on-*的，能夠使用下面的寫法

exrpot default {
  render() {
    return (
      <el-upload {...{
        props: {
          'on-success': () => {
            // 業務邏輯代碼...
          }
        }
      }}>上傳</el-upload>
    )
  }
}

v-for 循環

在JSX中，循環得使用array.map()的方式來

<script>
export default {
  data() {
    return {
      data: [
        {
          title: 1
        },
        {
          title: 2
        }
      ]
    };
  },
  render() {
    return (
      <div>
        <ul>
          {
            this.data.map(item => {
              return <li>{ item.title }</li>
            })
          }
        </ul>
      </div>
    );
  }
};
</script>

v-if 判斷

三元運算 方式一

<script>
export default {
  data() {
    return {
      isTrue: true,
    };
  },
  render() {

    const msg = this.isTrue ? '你中獎了' : '很遺憾，沒中'
    return (
      <div>
        中獎狀況：{ msg }
      </div>
    );
  }
};
</script>

三元運算 方式二

<script>
export default {
  data() {
    return {
      isTrue: true,
    };
  },
  render() {
    return (
      <div>
        中獎狀況：{ this.isTrue ? '好' : 'no' }
      </div>
    );
  }
};
</script>

樣式綁定

style方式

主要在標籤上 使用{...{}}進行綁定

<script>
export default {
  data() {
    return {
      backgroundColor: 'blue',
      styleObject: {
        backgroundColor: 'red',
        fontSize: '20px',
        color: '#fff'
      }
    };
  },
  render() {
    return (
      <div>
        <span {...{
          style: {
            backgroundColor: this.backgroundColor
          }
        }}>我是藍色背景</span>

        <span {...{
          style: this.styleObject
        }}>我是紅色背景</span>
      </div>
    );
  }
};
</script>

class 方式

<script>
export default {
  data() {
    return {
      isBlue: true,
      classOjbect: ['red']
    };
  },
  render() {
    return (
      <div>
        <span {...{
          class: {
            blue: this.isBlue,
          }
        }}>我是藍色背景</span>

        <span {...{
          class: this.classOjbect
        }}>我是紅色背景</span>
      </div>
    );
  }
};
</script>

<style>
.blue {
  background: blue
}
.red {
  background: red
}
</style>

Attrs 綁定

經常使用的動態id、data-*賦值

<script>
export default {
  data() {
    return {
    };
  },
  render() {
    return (
      <div>
        <span {...{
          attrs: {
            'id': 'app',
            'data-id': '1234'
          }
        }}>我是藍色背景</span>
      </div>
    );
  }
};
</script>

結果: <span id="app" data-id="1234">我是藍色背景</span>

Slots 插槽

配置{...{scopedSlots}}

<el-table
  data={this.tableData}
  stripe
>
  <el-table-column
    prop='shop_name'
    label='店鋪名稱'
  >
  </el-table-column>
  <el-table-column
    prop='shop_status'
    label='店鋪狀態'
    {...{
      scopedSlots: {
        default: props => {
          // props.row 當前行的數據
          return props.row.shop_status ? <el-tag type='success'>啓用</el-tag> : <el-tag type='danger'>禁用</el-tag>
        }
      }
    }}
  >
  </el-table-column>
  <el-table-column
    prop='shop_create_time'
    label='建立時間'>
  </el-table-column>
</el-table>