自定义Vue源码组件接入

Vue自定义组件通过vuera来完成vue2和react的互交互，最终暴露出一个React组件来跟现有的React自定义源码组件兼容。

数据

数据（props）层面与React自定义组件一致，但是由于style是vue中的保留字，所以平台传入的style内联样式会通过styles传入

事件

与React自定义组件通过events传入不同，vue组件中通过this.$emit触发自定义事件

插槽

组件插槽机制在vue中可以通过<slot></slot>默认插槽获取 react children

<slot name="xxx"></slot>获得具名插槽

模版

使用tcb lowcode create 可以创建vue模版

下面以模版中的示例组件counter,来展示写法。

入口React组件

首先创建组件的config，并且导出相关的配置。自定义组件导出最终是个React组件。在React组件中通过@tcwd/vuera提供的WedaVueWrapper包装vue组件并且导出

import React from 'react';import {WedaVueWrapper} from '@tcwd/vuera';import counter from './counter.vue';
export default function Counter(props) {    return (        <WedaVueWrapper            component={counter}            {...props}        />    );}

WedaVueWrapper的componentprop接收一个vue组件。其他props可以透传提供给vue组件获取

Vue组件

<template>  <div :id="id" :style="styles" :class="className">    <div class="counter-row">      <button class="counter-button" @click="minus">-</button>        <span class="counter-num">{{count}}</span>      <button class="counter-button" @click="add">+</button>    </div>    <div>      <slot name="innerSlot"></slot>    </div>  </div></template>
<script>export default {  props: ['init', 'styles', 'className', 'id'],  methods: {    add() {        this.count++;        this.$emit('add', this.count);    },    minus() {        this.count--;        this.$emit('minus', this.count);    }  },  data() {    return {      count: this.init ?? 0,    };  },  watch: {    init: function(val) {      this.count = val;    }  }}</script>
<style>.counter-row {    display: flex;    align-items: center;}.counter-num {    padding: 0 8px;}.counter-button {    display: inline-block;    padding-left: 0;    padding-right: 0;    padding-top: 0;    padding-bottom: 0;    margin: 0;    font-size: 14px;    width: 40px;    height: 40px;    border: none;    background-color: rgb(239, 239, 239);
}</style>

Vue 组件中可以从props获得传入的属性。和一般的vue组件写法一致通过slot获取React中的children和具名slot获取props传入的JSX Element，自定义事件通过this.$emit触发。但在微搭自定义组件中，与React自定义组件一样，有一些平台传入的props用于平台/用户设计态自定义的保留属性会固定传入比如id,styles(React 中为style内联样式)和className。他们会用在设计态和运行态注入自定义样式，class等场景。同时编辑器会也会过这些属性来定位元素和显示编辑态提示所以需要在模版中进行绑定。

最后确认将组件正确导出即可。