Two-way binding of react and vue2/3 parent-child components (sync, emit, v-model)

Table of contents

Vue

.sync（2.3.0+）

$emit (after 2.3)

v-model 2.2.0+ for custom components

v-model+emits (3.0 canceled .sync)

React

Parent component callback function

related basis

frame

MVC （Model View Controller）/MVP（Model View Presenter）

MVVM （Model View View Model）

The difference between React and 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(after 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+ for custom components

<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>

When the user enters text in the input box, userMessagethe value of is updated in real time,

And userMessagewhen the value of changes, the value in the input box will be updated automatically.

v-modelInternally, it is equivalent to using :value and @input to realize data binding and monitoring .

v-model+emits (3.0 canceled .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>

React

Parent component callback function

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>
  );
}

Two-way data binding between vue parent-child components (vue2/vue3)_vue3 parent-child component two-way binding_Front-end blog-CSDN Blog

related basis

frame

MVC （Model View Controller）/MVP（Model View Presenter）

• Model: Provide data
• View (view): display data
• Controller/Presenter (controller): Responsible for logic processing,

MVVM （Model View View Model）

Views and business logic are separated.

ViewModel is a bridge for their two-way binding, automatically updated synchronously

【advantage】

Compared with MVP, the coupling degree of each layer is lower, and a viewmodel layer can be shared by multiple view layers ( one-to-many ), which improves code reusability .

* Coupling degree: The degree of inter-module dependencies.

【shortcoming】

Because of the use of dataBinding , a large amount of memory overhead is added , which increases the compilation time of the program, so it is suitable for lightweight projects.

Data binding makes bugs hard to debug . You see that the interface is abnormal. It may be that there is a bug in the code of your View , or there may be a problem in the code of the Model .

The difference between React and Vue

Both React and Vue use MVVM , and the props passed from the parent component to the child component are not allowed to be modified by the child component

React one-way data flow : only changes in the data layer can affect changes in the view layer

But Vue provides syntactic sugar for two-way data binding ($emit, v-model)

In the documentation, the variable name vm ( short for ViewModel ) is often used to represent the component instance .