子组件向父组件的同等级组件传值？

Question

有一个父组件 A，上面有两个子组件，B 和 C。

在子组件 B 上有一个子组件 D，其中 D 里面有一个 textarea

在子组件 C 上有一个按钮，点击这个按钮获取 D 里面 textarea 的值。

我尝试的两个方案

• 方案一：可以通过直接操作 dom 来解决
• 方案二：通过 D 将 textarea 的值传递给 B，然后由 B 传给 A，再有 A 传给 C，但总是传不成功。

请问我的这个需求，还有其它什么更优的解决方案吗？多谢。

Answer 1

两种方式来实现。

1. 一种是层层传值

在顶级组件 A 组件中用 const [value, setValue] = useState("")来存储textarea中的值，然后将value和 setValue传递到D组件中，同时将value给到C组件，这样C组件就能获取到textarea中的值了。

2. React中的context

React中自带处理上下文的hook，可以把A组件中的 value 和 setValue 传递到任意的子组件。

1. 先用 createContext() 来创建生产者，这个来包裹住所有要用到更新数据的组件；
2. 用 useContext() 或 Consumer 来使用数据；

const { useState } = require("react");

// store.js
const TextareaContext = React.createContext(""); // 传入初始值，这里只存储textarea的值，因此可以默认是空字符窜

// A组件中
const AppA = () => {
  const [value, setValue] = useState("");

  // 把 value 和 setValue 传递过去
  return (
    <TextareaContext.Provider value={{ value, setValue }}>
      <B />
      <D />
    </TextareaContext.Provider>
  );
};

// B组件中不用任何处理，直接引用<D />即可

// D组件
const AppD = () => {
  const { value, setValue } = useContext(TextareaContext);

  return <textarea value={value} onChange={setValue} />;
};

// C组件
const AppC = () => {
  const { value } = useContext(TextareaContext);

  return <button onClick={() => alert(value)}>get</button>;
};

Answer 2

根据题干中的组件层级结构, 如果是Vue那就使用事件总线或vuex, 如果是react使用redux或上下文, 但是我认为使用redux最方便

一层一层的传值的方法是不好的

Answer 3

用兄弟组件之间的数据传递。

首先，需要确保两个兄弟组件都已经被正确引入并注册到了同一个父组件中。然后，我们可以使用props属性将数据从一个兄弟组件传递给另外一个兄弟组件。

下面是一个示例代码：

<!-- ParentComponent.vue -->
<template>
  <div>
    <!-- Child1Component.vue -->
    <Child1 :data="message" />
    
    <!-- Child2Component.vue -->
    <Child2 :value="childData" @update-data="handleUpdateData" />
  </div>
</template>
 
<script>
import Child1 from './Child1Component.vue';
import Child2 from './Child2Component.vue';
 
export default {
  components: {
    Child1,
    Child2
  },
  
  data() {
    return {
      message: 'Hello', // 初始化消息为'Hello'
      childData: '' // 存放子组件传递过来的数据
    };
  },
  
  methods: {
    handleUpdateData(newValue) {
      this.childData = newValue; // 接收子组件传递过来的新数据
    }
  }
};
</script>

ParentComponent作为共享状态的容器，包含了两个兄弟组件Child1和Child2。其中，Child1通过props属性将message数据传递给Child2，而Child2则通过事件机制（@）向ParentComponent发送更新数据的信号。