【前端每日一题】day9——vue/react 传值

在Vue.js和React中，组件间的通信和传值是非常重要的部分。根据组件间的关系，可以使用不同的方法来实现通信。以下是Vue.js和React中父子组件通信和没有父子关系的组件间通信的几种常见方法，并附有代码示例。

Vue.js

1. 父组件到子组件（Props）

父组件通过props传递数据到子组件。

父组件

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>

子组件

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

子组件到父组件（Event Emitting）

子组件通过事件将数据传递到父组件。

父组件

<template>
  <div>
    <ChildComponent @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log('Data from child:', data);
    }
  }
};
</script>

子组件

<template>
  <button @click="sendDataToParent">Send Data to Parent</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('childEvent', 'Hello from Child');
    }
  }
};
</script>

没有父子关系的组件（Event Bus）

使用Event Bus实现全局事件通信。

EventBus

import Vue from 'vue';
export const EventBus = new Vue();

<template>
  <button @click="sendData">Send Data</button>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  methods: {
    sendData() {
      EventBus.$emit('eventFromA', 'Hello from A');
    }
  }
};
</script>

组件B

<template>
  <div>{{ message }}</div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('eventFromA', (data) => {
      this.message = data;
    });
  }
};
</script>

React

父组件到子组件（Props）

父组件通过props传递数据到子组件。

父组件

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  state = {
    parentMessage: 'Hello from Parent'
  };

  render() {
    return <ChildComponent message={this.state.parentMessage} />;
  }
}

export default ParentComponent;

子组件

import React from 'react';

const ChildComponent = ({ message }) => {
  return <div>{message}</div>;
};

export default ChildComponent;

子组件到父组件（Callback Functions）

子组件通过回调函数将数据传递到父组件。

父组件

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  handleChildEvent = (data) => {
    console.log('Data from child:', data);
  };

  render() {
    return <ChildComponent onChildEvent={this.handleChildEvent} />;
  }
}

export default ParentComponent;

子组件

import React from 'react';

const ChildComponent = ({ onChildEvent }) => {
  const sendDataToParent = () => {
    onChildEvent('Hello from Child');
  };

  return <button onClick={sendDataToParent}>Send Data to Parent</button>;
};

export default ChildComponent;

没有父子关系的组件（Context API）

使用Context API进行全局状态管理和通信。

MyContext.js

import React from 'react';

const MyContext = React.createContext();

export default MyContext;

Provider Component

import React from 'react';
import MyContext from './MyContext';

class MyProvider extends React.Component {
  state = {
    message: 'Hello from Provider'
  };

  render() {
    return (
      <MyContext.Provider value={this.state.message}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

export default MyProvider;

组件A

import React, { useContext } from 'react';
import MyContext from './MyContext';

const ComponentA = () => {
  const message = useContext(MyContext);

  return <div>{message}</div>;
};

export default ComponentA;

组件B

import React, { useContext } from 'react';
import MyContext from './MyContext';

const ComponentB = () => {
  const message = useContext(MyContext);

  return <div>{message}</div>;
};

export default ComponentB;

App.js

import React from 'react';
import MyProvider from './MyProvider';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const App = () => {
  return (
    <MyProvider>
      <ComponentA />
      <ComponentB />
    </MyProvider>
  );
};

export default App;