Complemento JS que admite referencias integradas de vue y reacciona en escenarios complejos

Como todos sabemos, React es más puro y Vue encapsula más, por lo que la mayoría de las dificultades se concentran en el proceso de componentes de reacción que hacen referencia a componentes de vue.

Consulte /devilwjp/ vuereact-for-vuecli3-demo

Consulte /devilwjp/vuereact-for-cra-demo

Dado que la especificación del nombre de los ganchos de reacción comienza con el uso, el método que comienza with use Todos se han modificado para comenzar con apply, y el antiguo método start with use sigue siendo válido

Utilice el componente vue en el componente de reacción. Si desea utilizar la modificación de sincronización de vue, utilice sync lt; Objectgt;

Uso de componentes de vue en componentes de reacción

En componentes de reacción, pase ranuras con nombre y ranuras de alcance a componentes de vue, vincule eventos personalizados y aplicaciones de modelo v

reaccionar en sí no es compatible con el modelo v, por lo que no es necesario cambiar el valor y la configuración del modelo

Haga referencia dinámicamente al componente vue en el componente de reacción, similar al lt;component /gt;

A diferencia de reaccionar, vue tiene la función de registrar componentes globalmente, por lo que no es necesario introducir cada componente por separado.

Pase la identificación del componente global de vue como parámetro a applyVueInReact , o use la identificación como componente El valor del atributo se pasa al VueContainer

Ejemplo: uso del DatePicker de la versión global de vue element-ui en reaccionar

Uso del componente React en el componente Vue

En el componente Vue, pase ranuras con nombre y ranuras con alcance al componente React y vincule eventos personalizados

Dado que React no tiene el concepto de ranuras, todo existe como atributos, y las ranuras con nombre y las ranuras de alcance de Vue se convertirán en propiedades de React, y las ranuras de alcance se convertirán en accesorios de renderizado

Y los eventos de componentes de Vue también se convertirán en propiedades de React

Por ejemplo, el componente Tarjeta de la versión reaccionar de antd, el ejemplo de uso en reaccionar es el siguiente

La versión reaccionar de antd, el ejemplo de uso en el componente vue es el siguiente

Función: Hacer que todos los componentes de Vue puedan usar la administración de estado de redux

Habilitar la administración de estado de redux para el kit de herramientas. Este escenario generalmente existe en proyectos basados ​​en React. Para permitir que los componentes de Vue disfruten de redux. introduzca el método applyRedux en el archivo de entrada del proyecto (el proyecto completo solo debe introducirse una vez) y pase el almacén redux y el contexto redux como parámetros (o al menos use el método applyRedux donde está el componente de alto orden del proveedor redux introducido)

La forma en que los componentes de React se conectan a redux no se presentará aquí. Debe usar el método de conexión de react-redux.

Aquí hay una introducción a cómo los componentes de Vue usan redux. El kit de herramientas implementa vue tanto como sea posible. El componente usa vuex para usar redux. A través de vm.$redux, puede obtener la administración del estado de redux en la instancia del componente.

Función: hacer que todos los componentes de Redux usen la administración del estado de Vuex.

Habilite la administración del estado de vuex para el kit de herramientas; este escenario generalmente existe

En un proyecto basado en Vue, para permitir que los componentes de React disfruten de vuex, debe introducir el método applyVuex en el archivo de entrada del proyecto (el proyecto completo solo debe introducirse una vez) y pasar la tienda de vuex como parámetro. / p>

Similar al método de conexión de react-redux, se usa en los componentes de React. Dado que vuex tiene más palabras clave que redux, los parámetros se cambian a objetos, incluidos mapStateToProps, mapCommitToProps, mapGettersToProps y mapDispatchToProps, cada uno de ellos. que es una función pura que devuelve un objeto (exactamente igual que el uso de la conexión de redux)

Carga diferida de componentes de Vue en el enrutador de React

Carga diferida de componentes de React en el enrutador de Vue

Cada componente de vue que pasa por applyVueInReact y el componente de reacción que pasa por applyReactInVue pueden recibir un atributo data-passed-props. Este atributo puede ayudarlo a usarlo nuevamente sin ningún empaquetado. applyReactInVue recibe todos los atributos (debido a la transmisión transparente entre cuadros, el método de transmisión transparente nativo no realizará automáticamente la encapsulación y conversión correspondientes)

Dado que los componentes se procesan a través de un cuadro cada vez Al hacer referencia, una capa de encapsulación aparecerá. Este sobre se presenta como un div y estará marcado con atributos especiales

React-gt; Vue encapsulará una capa de datos de identificación fuera del elemento dom del componente vue. div de componente-wrap

Vue-gt; React encapsulará una capa de div marcada __use_react_component_wrap alrededor del elemento dom del componente de reacción

Si causa problemas de estilo, puede modificar globalmente el estilos de estos logotipos