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>