Ligação bidirecional de componentes pai-filho react e vue2/3 (sync, emit, v-model)

Índice

Vue

.sync（2.3.0+）

$emit (depois de 2.3)

v-model 2.2.0+ para componentes personalizados

v-model+emits (3.0 cancelou .sync)

Reagir

Função de retorno de chamada do componente pai

base relacionada

quadro

MVC (Model View Controller)/MVP (Model View Presenter)

MVVM (Model View View Model)

A diferença entre React e Vue

---

Vue

.sync（2.3.0+）

//父组件
<template>
    <TestCom :num.sync="data"></TestCom>
</template>
<script>
export default({
  components: {
    TestCom,
  },
  data() {
    return {
      data:2
    }  
  },
});
</script>


//子组件
<template>
  <div>
    <button @click="cahngeNum">按钮</button>
    {
   
   { num }}
  </div>
</template>

<script>
export default({
  props: {
    num: {
      default: "",
      type: String,
    },
  },
  methods: {
    cahngeNum() {
      this.$emit("update:num", 999); // 触发update:data将子组件值传递给父组件
    },
  },
});
</script>

$emit(após 2.3)

<template>
  <div>
    <!-- 子组件模板 -->
    <button @click="updateVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateVisibility() {
      const newVisibility = !this.visibility;
      this.$emit('visibility-change', newVisibility);
    }
  },
  props: ['visibility']
};
</script>

<template>
  <div>
    <!-- 父组件模板 -->
    <child-component :visibility="visibility" @visibility-change="handleVisibilityChange" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      visibility: false
    };
  },
  methods: {
    handleVisibilityChange(newVisibility) {
      this.visibility = newVisibility;
    }
  }
};
</script>

v-model 2.2.0+ para componentes personalizados

<input v-model="searchText">
语法糖 等价于：
<input
  :value="searchText"
  @input="searchText = $event.target.value"
>

<template>
  <div>
    <label for="message">Message:</label>
    <input type="text" id="message" v-model="userMessage" />
    <p>Entered message: {
   
   { userMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userMessage: '' // 初始值为空
    };
  }
};
</script>

Quando o usuário insere texto na caixa de entrada, userMessageo valor de é atualizado em tempo real,

E userMessagequando o valor for alterado, o valor na caixa de entrada será atualizado automaticamente.

v-modelInternamente, é equivalente a usar :value e @input realizar vinculação e monitoramento de dados .

v-model+emits (3.0 cancelou .sync)

// 父组件
<template>
    <div>
        // 父组件传递给子组件num属性(默认使用modelValue)
        <child v-model:num = data></child>
    </div>
</template>
<script>
    data(){
      return {
        data:'我是来自父组件的数据'
      }
    }
</script>


//子组件
<template>
  <div>
    <button @click="cahngeNum">按钮</button>
    {
   
   { num }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  emits: ["update:num"],
  props: {
    num: {
      default: "",
      type: String,
    },
  },
  setup(props, { emit }) {
    function cahngeNum() {
      emit("update:num", 999); 
    }
    return { cahngeNum };
  },
});
</script>

Reagir

Função de retorno de chamada do componente pai

import React, { useState } from 'react';

function ParentComponent() {
  const [visibility, setVisibility] = useState(false);

  // 父组件中的回调函数，用于接收子组件传递的更新数据
  const handleVisibilityChange = (newVisibility) => {
    setVisibility(newVisibility);
  };

  return (
    <div>
      {/* 将属性和回调函数传递给子组件 */}
      <ChildComponent visibility={visibility} onVisibilityChange={handleVisibilityChange} />
    </div>
  );
}

import React from 'react';

function ChildComponent({ visibility, onVisibilityChange }) {
  // 子组件中的事件处理函数，用于更新属性并调用回调函数
  const handleVisibilityToggle = () => {
    const newVisibility = !visibility;
    onVisibilityChange(newVisibility);
  };

  return (
    <div>
      {/* 子组件根据需要使用属性 */}
      <button onClick={handleVisibilityToggle}>Toggle Visibility</button>
    </div>
  );
}

Ligação de dados bidirecional entre componentes pai-filho vue (vue2/vue3)_vue3 componente pai-filho ligação bidirecional_Front-end blog-CSDN Blog

base relacionada

quadro

MVC (Model View Controller)/MVP (Model View Presenter)

• Modelo: fornecer dados
• Exibir (visualizar): exibir dados
• Controlador/Apresentador (controlador): Responsável pelo processamento lógico ,

MVVM (Model View View Model)

As exibições e a lógica de negócios são separadas.

ViewModel é uma ponte para sua ligação bidirecional, atualizada automaticamente de forma síncrona

【vantagem】

Em comparação com o MVP, o grau de acoplamento de cada camada é menor, e uma camada de modelo de exibição pode ser compartilhada por várias camadas de exibição ( um para muitos ), o que melhora a reutilização do código .

* Grau de acoplamento: O grau de dependências entre módulos.

【deficiência】

Devido ao uso de dataBinding , uma grande quantidade de sobrecarga de memória é adicionada , o que aumenta o tempo de compilação do programa, por isso é adequado para projetos leves .

A vinculação de dados torna os bugs difíceis de depurar . Você vê que a interface está anormal, pode ser algum bug no código da sua View , ou pode ser algum problema no código do Model .

A diferença entre React e Vue

Ambos React e Vue usam MVVM , e as props passadas do componente pai para o componente filho não podem ser modificadas pelo componente filho

Reagir ao fluxo de dados unidirecional : apenas as alterações na camada de dados podem afetar as alterações na camada de exibição

Mas o Vue fornece açúcar sintático para ligação de dados bidirecional ($emit, v-model)

Na documentação, o nome da variável vm ( abreviação de ViewModel ) costuma ser usado para representar a instância do componente .