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

Question

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

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

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

我尝试的两个方案

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

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

Answer 1

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

首先，需要确保两个兄弟组件都已经被正确引入并注册到了同一个父组件中。然后，我们可以使用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发送更新数据的信号。

Answer 2

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

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

Answer 3

两种方式来实现。

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.jsconst 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 4

这是一个涉及到前端组件间通信的问题。对于你的需求，以下是一些可能的解决方案：

1. 使用事件总线（Event Bus）：你可以创建一个全局的事件总线，比如在根组件上设置一个全局的事件监听和触发器。子组件可以通过事件总线将数据发送到任何其他组件。
2. 使用状态管理库：例如 Redux 或 MobX。这些库可以帮助你管理应用的状态，并使组件能够访问和修改这些状态。
3. 使用上下文（Context）：React 16.3 之后引入了 Context API，它允许你在不显式地创建 props 树的情况下，将值从祖先组件传到其所有后代组件。
4. 使用 React Hooks：特别是 useState 和 useContext 这两个 Hook。useState 可以让你在函数组件中添加状态，而 useContext 可以让你使用 Context API。

在你的情况下，一种可能的解决方案是使用事件总线。首先，创建一个事件总线，然后在子组件 D 中触发一个事件，将 textarea 的值作为参数传递。在子组件 C 中监听这个事件，获取参数。具体实现可能如下：

// 创建事件总线const EventBus = new EventEmitter();// 在子组件 D 中触发事件function onTextareaChange(value) {  EventBus.emit('update', value);}// 在子组件 C 中监听事件EventBus.on('update', (value) => {  console.log(value); // 或者将其传递给其他组件});

这种方法的优点是简单和灵活，但它也有一些缺点，例如如果你有大量的组件需要通信，可能会使得代码变得混乱。在这种情况下，使用状态管理库或 Context API 可能是一个更好的选择。