Vue中使用JSX记录

Basics

从实际的开发体验看，现在可以选择的vue jsx插件是 babel-preset-vca-jsx

项目中引入即可直接写jsx

named slots

<span>
  <H slot="header" />
  <F slot="footer" />
</span>

=> this.$slots key/value的值类型是VNode[]

scoped slots

<C
  scopedSlots={{
    header: (props) => <H prop={props.xxx} />,
    footer: (props) => <F prop={props.xxx} />
  }}
/>

=> this.$scopedSlots key/value的值类型是function

.sync

// 以value属性为例
// 等价于 <C :value.sync="value" />
<C
  {...{
    props: {
      value: this.value
    },
    on: {
      'update:value': v => { this.value = v }
    }
  }}
/>

jsx中引入样式

直接使用css module

import $style from 'xx/xx.scss'

<div class={$style.someClass}>xxx</div>

函数式组件

const A = ({ props, listeners, data, children, parent, injections, slots, scopedSlots }) => {
  return <div></div>
}

Demo

拦截ElButton的click事件

const NewElButton = ctx => {
  const { props, listeners, children } = ctx;
  let on = { ...listeners };
  if (listeners.click) {
    on.click = () => {
      console.log('ElButton被点击了');
      listeners.click()
    };
  }
  return (
    <el-button props={props} on={on}>
      {children}
    </el-button>
  );
};

比较通用的防抖操作就可以用拦截的方式实现。（本质是Vue的函数式组件）

Published 15 Sep 2020

路漫漫其修远兮。