Vue Custom Components

Vue custom components use vuera to achieve interoperability between Vue 2 and React, ultimately exposing a React component that is compatible with existing custom React components.

Data

At the data (props) level, it is consistent with React custom components, but since style is a reserved word in Vue, the inline styles passed by the platform will be passed via styles.

Events

Unlike React custom components that pass events, Vue components trigger custom events via this.$emit.

Slots

The component slot mechanism in Vue can use the <slot></slot> default slot to access React children.

<slot name="xxx"></slot> to access named slots

Template

Using tcb lowcode create can create the vue template

Below, the example component counter in the template demonstrates how it is written.

1) React Component

First, create the component's config and export the relevant configuration. The exported custom component is ultimately a React component. In the React component, wrap the Vue component using WedaVueWrapper provided by @tcwd/vuera and export it.

import React from 'react';
import {WedaVueWrapper} from '@tcwd/vuera';
import counter from './counter.vue';

export default function Counter(props) {
    return (
        <WedaVueWrapper
            component={counter}
            {...props}
        />
    );
}

The componentprop ofWedaVueWrapper` receives a Vue component. Other props can be passed through to the Vue component.

2) Vue Component

<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 components can access passed properties from props.

Consistent with general Vue component writing, access React children via slot and named slot to obtain JSX Element passed through props, while custom events are triggered via this.$emit.

However, in Weida custom components, similar to React custom components, certain platform-passed props are reserved for platform/user design-time customization and are always passed, such as id, styles (in React, style for inline styles), and className. These are used in scenarios like injecting custom styles and classes during design-time and runtime. Simultaneously, the editor utilizes these properties to locate elements and display editing hints, so they need to be bound in the template.

Finally, ensure the component is exported correctly.