Vue 中使用jsx示例

時間 2019-11-17

標籤 vue 使用 jsx 示例简体版

原文原文鏈接

瞭解什麼是JSX

爲何要在Vue中使用jsx呢，首先咱們須要瞭解JSX是什麼，它解決了什麼問題，最後如何使用它。html

jsx的定義

JSX 是一種相似於 XML 的 JavaScript 語法擴展 JSX 不是由引擎或瀏覽器實現的。相反，咱們將使用像 Babel 這樣的轉換器將 JSX 轉換爲常規 JavaScript。基本上，JSX 容許咱們在 JavaScript 中使用相似 HTML 的語法。vue

jsx的優點

能夠將模版分離這樣模版的每一個部分更加獨立，又能夠隨機的組合，複用性更高。相比與組件的組合，粒度更細
使用 js 可配置每項要渲染的 dom，更加動態可配置化

小結

雖然瞭解了jsx的相關定義，可能對它仍是比較陌生，首先要知道不管在 Vue中仍是React，使用JSX 都是可選的。如：react

// react 中使用jsx
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

// 同等效果的代碼能夠以下，只不過是babel幫咱們作了這些
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}
複製代碼

瞭解Vue組件

在使用 Vue 時一般咱們經過new Vue()是建立一個根實例，而組件是可複用的 Vue 實例它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。npm

new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})
複製代碼

爲了處理多個組件映射關係，將路由實例對象做爲參數傳遞給 Vue構造函數。new Vue()建立的是根實例，而每一個頁面組件實例經過 router 來控制。結構以下：數組

export default {
    name: '',
    props:{},
    data:{},
    methods:{}
  }
複製代碼

能夠看到路由映射的組件其實也是暴露出一個對象，在Vue就是經過一個對象去描述組件。而默認狀況下，咱們使用 template 做爲模版，若是想使用 jsx 來渲染模版寫格式以下,其實就是省略來 template 模版，取而代之使用 render 方法 return 要渲染的模版。而且其餘都是選填項，render 方法必須返回出要渲染的模版。瀏覽器

export default {
    name: '',
    props:{},
    data:{
        return {
            text:'hello jsx'
        }
    },
    render(){
        return <div>{text}</div>
    },
    methods:{}
  }
複製代碼

Vue 中使用jsx

經常使用 React 的同窗對 jsx 的語法比較熟悉，其實不少用法能夠參照 react 的官方文檔以下面咱們會提到的經常使用語法bash

js 環境

在 Vue 模版中渲染一個變量的方式babel

<div id="app">
  {{ message }}
</div>
複製代碼

包括使用 v-bind 綁定一個變量值app

<span v-bind:title="message">
    鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
</span>
複製代碼

而在 jsx 中是用 {} 表示的相同的代碼表示以下dom

render(){
    return (
        <div id="app">
            <div>
              { message }
            </div>
            <span title={message}>
                鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
            </span>
        </div>
    )
}
複製代碼

須要解釋一下的是，在 Vue 中 "" 表示一個js環境，你能夠在其中作一些簡單的運算 <img :src="'/path/to/images/' + fileName">,在 jsx 中{}表示 js 環境。<span>{3+2}</span>

v-if 語法糖

Vue經常使用的 v-if 來控制dom的顯示隱藏，本質就是 dom 的渲染和卸載。那麼在 jsx 中如何實現

data(){
    return {
        isShow:false
    }
},
render(){
    return <div>
        { this.isShow ? <span>顯示啦</span>：null}
    </div>
}
複製代碼

上面代碼中 { } 表示一個js環境，判斷this.isShow 的真假來控制 dom 的顯示與否

綁定事件

Vue 中使用 v-on 來綁定事件簡寫@

<button @click="onButtonClick">按鈕</button>
複製代碼

而在jsx中綁定事件前面都會加一個 on- 做爲前綴

<button onClick={this.onButtonClick}>按鈕</button>
複製代碼

如何在 jsx 中傳參

<button onClick={this.onButtonClick.bind(this,value)}>按鈕</button>
複製代碼

上面對面中的 value 就是傳遞給 onButtonClick 函數的參數。首先經過 { } 創建起js環境，而後經過 this.onButtonClick 拿到定義在 methods 中定義的函數，經過 bind 函數給當前函數傳遞參數 value 並返回一個待執行的新函數。最終，onClick 綁定的是 bind 返回的新函數。

如何綁定子組件 emit 的事件,假設在 child.vue 中派發了一個 emit 事件，jsx中如何去綁定監聽事件

// father.js
export default {
    components:{
        child
    },
    render(){
        return  <div>
        <child onCancel={this.onCancel} />
    </div>
    }
}
// child.vue
methods:{
    onCancelClick(){
        this.$emit('cancel')
    }
}
複製代碼

其餘類型的事件的綁定 , 類比 onClick 就是前面加上 on-

<input  onChange={this.onValueChange} />
複製代碼

v-for 枚舉實現

在 Vue 中咱們能夠用 v-for 指令基於一個數組來渲染一個列表。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
複製代碼

在 jsx 中在 { } 使用數組的 map 方法遍歷生成一個新的數組

<div>
    {this.tagList.map(item => {
        return <div>{item}</div>
    })}
</div>
複製代碼

slot

Vue 中在標籤中間添加內容的方式，向組件傳遞內容，slot 位置內容會被傳入的內容替代

// 傳值
<alert-box>
  Something bad happened.
</alert-box>

// 接收
Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <slot></slot>
    </div>
  `
})
複製代碼

jsx 中經過 this.$slots 對象能夠拿到組件標籤中的內容

<Temp>
    123
    <span>ccc</span>
</Temp>
// Temp.js
export default {
  render(){
    return <h1>{this.$slots.default}</h1>
  }
}
複製代碼

具名插槽

<Temp>
    123
    <span slot="text">ccc</span>
</Temp>
// Temp.js
export default {
  render(){
    return <h1>{this.$slots.text}</h1>
  }
}
複製代碼

解構插槽

export default {
  data(){
    return {
    list: [
        {
          "id":11,
          "name":"保險百科"
        }
      ],
      propList: [
        {
          props: {
            prop: "name",
            label: "分類名稱"
          }
        },
      ]
    }
  },
  render(){
    let slot = {
      scopedSlots :{
        default :props=>{
          return <h1>{props.row.name}</h1>
        }
      }
    }
    return (
      <el-Table data={this.list}  >
      {this.propList.map((item, index) =>{
        return (
          <el-table-column {...item} {...slot} ></el-table-column>
        )
      }
      )}
    </el-Table>
    )
  }
}
複製代碼

props 屬性傳遞

Vue 中父組件傳遞 props 給子組件經過 v-bind,若是有多個值須要傳遞，則須要聲明多個props，或者傳遞一個對象給子組件，

<my-component :prop="someThing"></my-component>
複製代碼

而 jsx 中可使用... 擴展符來實現多個值的傳遞，注意傳遞的屬性須要聲明在 props 對象下

render(){
    let value = {
      props:{
        type:'primary',
        disabled:'disabled'
      }
    }
    return (
      <el-button {...value}>按鈕</el-button>
    )
  }
複製代碼