vue3 父子组件的多种传参，附加详细代码解释

在 Vue 3 中，父子组件之间的通信可以通过多种方式实现。下面是一些常用的方法，以及相应的代码示例和详细解释。

1. 使用 Props 从父组件传递数据到子组件

父组件 (Parent.vue)

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent :message="parentMessage" :count="parentCount" />
  </div>
</template>

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

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

子组件 (ChildComponent.vue)

<template>
  <div>
    <h2>子组件</h2>
    <p>来自父组件的消息: {{ message }}</p>
    <p>来自父组件的计数: {{ count }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      required: true
    }
  }
};
</script>

解释:

• 在父组件中，使用 v-bind 或简写的 : 语法将 parentMessage 和 parentCount 传递给子组件。
• 在子组件中，使用 props 选项定义接收的属性，并指定它们的类型和是否必需。

2. 使用 $emit 让子组件向父组件发送消息

子组件 (ChildComponent.vue)

<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', 'Hello from Child');
    }
  }
};
</script>

父组件 (Parent.vue)

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent @message-from-child="receiveMessage" />
    <p>子组件发送的消息: {{ childMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childMessage: ''
    };
  },
  methods: {
    receiveMessage(message) {
      this.childMessage = message;
    }
  }
};
</script>

解释:

• 在子组件中，使用 this.$emit 触发事件，并传递消息。
• 在父组件中，使用 v-on 或简写的 @ 监听子组件的事件，并在事件处理方法中接收消息。

3. 使用 Provide/Inject 实现跨层级的状态管理

祖父组件 (Grandparent.vue)

<template>
  <div>
    <h1>祖父组件</h1>
    <ParentComponent />
  </div>
</template>

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

export default {
  components: {
    ParentComponent
  },
  provide() {
    return {
      sharedState: 'Hello from Grandparent'
    };
  }
};
</script>

父组件 (ParentComponent.vue)

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

子组件 (ChildComponent.vue)

<template>
  <div>
    <h2>子组件</h2>
    <p>祖父组件传来的消息: {{ injectedMessage }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const injectedMessage = inject('sharedState');
    return { injectedMessage };
  }
};
</script>

解释:

• 使用 provide 在祖父组件中定义共享的状态。
• 在子组件中使用 inject 获取祖父组件提供的状态。这种方式适用于跨层级的组件传参。

4. 使用 Vuex 进行全局状态管理（如果需要）

如果应用较大，建议使用 Vuex 进行全局状态管理，这样可以更方便地在不同组件间共享数据。

总结

以上就是在 Vue 3 中父子组件间多种传参方式的详细代码示例与解释。选择哪种方式取决于具体的应用需求和组件结构。如果有其他问题，欢迎随时提问！