vue3+jsx+antd 的双向数据绑定、事件绑定、变量绑定方法

v-model   input的数据双向绑定

const App = {
  setup() {
  	let visible = ref('');
    return { visible };
  },
  render() {
    return (
    <input v-model={[this.visible,'value']} />
	);
  },
};

事件绑定   

const App = {
  setup() {
  	let tableTitle = [
  		 {
        title: '报表种类',
        dataIndex: 'reportType',
        width: '50%'
      },
      {
        title: '操作',
        dataIndex: 'handle',
        width: '50%',
        slots: {
          customRender: 'operation'
        }
      }
  	];
  	let tableItem = ref([
		{
			key:'1',
			reportType:'报表内容1',
			
		}
	])
  	const clickHandle = ()=>{
		console.log('1');
	}
	const deleteHandle = ()=>{
		console.log('2');
	}
    return { clickHandle,deleteHandle,tableTitle,tableItem};
  },
  render() {
  	const Slot = {
  	//  { record } 代表了某一行表格的信息  
      operation: ({ record }) => {
        return (
          <div>
            <span
              style={{ marginRight: '10px', cursor: 'pointer', color: '#1890ff' }}
              // 如果这样写onClick={this.exportHandle(record);}会在渲染的时候立即执行，必须向下面这样写
              onClick={() => {
                this.deleteHandle(record);
              }}
            >
              删除
            </span>
          </div>
        );
      }
    };
    return (
    	<div>
    	//  数据变量的绑定
    	<a-table columns={this.tableTitle} data-source={this.tableItem}></a-table>
    	//  点击事件的绑定
    	<span onClick={this.clickHandle}>点击了我</span>
    	//  点击事件的绑定 需要传参  这种情况是在  这个元素是函数生成的，一般是map返回的元素  里面必须用这种绑定 否则会自己触发
    	//  <span onClick={()=>{this.clickHandle(value)}}>点击了我</span>
    	</div>
	);
  },
};