vue3 在同一个html页面有2子组件子组件之间相互传值

在Vue 3中，你可以使用props和emit来实现子组件之间的值传递。下面是一个简单的示例，展示了如何在同一个HTML页面上的两个子组件之间进行值传递：

首先，创建一个父组件，命名为`App`，它包含两个子组件：`ChildComponent1`和`ChildComponent2`。在父组件中，你可以定义一个数据属性，然后将其作为props传递给子组件1。子组件1可以通过props接收该值，并在需要时使用`$emit`触发自定义事件将值传递给子组件2。子组件2可以通过监听该事件来接收传递过来的值。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Vue 3 Example</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <child-component1 :value="parentValue"></child-component1>
    <child-component2 @custom-event="handleEvent"></child-component2>
  </div>

app.component('child-component1', {
      props: ['value'],
      template: `
        <div>
          <input type="text" v-model="value">
          <button @click="$emit('custom-event', value)">传递给子组件2</button>
        </div>
      `
    });

app.component('child-component2', {
      template: `
        <div>
          子组件2接收到的值: {{ receivedValue }}
        </div>
      `,
      data() {
        return {
          receivedValue: ''
        }
      },
      created() {
        this.$parent.$on('custom-event', (value) => {
          this.receivedValue = value;
        });
      }
    });

app.mount('#app');
  </script>
</body>
</html>
```

在上述示例中，父组件`App`中的`parentValue`作为prop传递给了`ChildComponent1`，并通过`$emit`触发了名为`custom-event`的自定义事件，将值传递给了`ChildComponent2`。`ChildComponent2`通过`this.$parent.$on`监听`custom-event`事件，并将传递过来的值存储在`receivedValue`中进行展示。

请注意，上述示例是一个简单的演示，实际应用中可能需要根据具体情况进行适当的调整和改进。

注:原创不易,转载请注明出处( https://micuu.com/new/3610.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

vue3 在同一个html页面 有2子组件 子组件之间相互传值

留言反馈

vue3 在同一个html页面有2子组件子组件之间相互传值