uView Plus Vue3 ： （ VIP Plus 付费版 ）

# uniapp 父子组件相互传递

TIP

父组件传递子组件

# 🧩一：返回上一个页面 并调用上一个页面的方法 传递参数


	let pages = getCurrentPages()
	let prevPage = pages[pages.length - 2]
	if (prevPage && prevPage.$vm && prevPage.$vm.customerSaveSuccess) {
		prevPage.$vm.customerSaveSuccess(params)
	}

	uni.navigateBack()


✅ Copy success!

# 🧩二：父子组件：插槽正确使用方式

当然可以 ✅ 我来给你一个Vue 3 选项式 API下父子组件使用插槽的完整、清晰案例。 包括： 1️⃣ 默认插槽 2️⃣ 具名插槽 3️⃣ 作用域插槽

# 🧩 一、父组件与子组件结构

src/
├── components/
│   └── Child.vue
└── App.vue

✅ Copy success!

# 👶 子组件（Child.vue）

<template>
  <div class="child-box">
    <h3>我是子组件</h3>

    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 具名插槽 -->
    <slot name="footer"></slot>

    <!-- 作用域插槽，向父组件暴露数据 -->
    <slot name="info" :msg="childMsg" :count="count"></slot>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      childMsg: "这里是子组件传递给插槽的数据",
      count: 42,
    };
  },
};
</script>

<style scoped>
.child-box {
  border: 1px solid #aaa;
  padding: 10px;
  margin: 10px 0;
}
</style>

✅ Copy success!

# 👨‍👩‍👧 父组件（App.vue）

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

    <Child>
      <!-- 默认插槽内容 -->
      <p>我是父组件放进默认插槽的内容。</p>

      <!-- 具名插槽 -->
      <template #footer>
        <p style="color: blue;">这里是具名插槽 footer 的内容。</p>
      </template>

      <!-- 作用域插槽：接收子组件传的数据 -->
      <template #info="{ msg, count }">
        <p style="color: green;">
          我从子组件拿到的 msg: {{ msg }}，count: {{ count }}
        </p>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "./components/Child.vue";

export default {
  name: "App",
  components: { Child },
};
</script>

<style scoped>
h2 {
  color: #333;
}
</style>

✅ Copy success!

# 💡 输出效果

父组件
└── 我是子组件
     ├── 我是父组件放进默认插槽的内容。
     ├── 这里是具名插槽 footer 的内容。
     └── 我从子组件拿到的 msg: 这里是子组件传递给插槽的数据，count: 42

✅ Copy success!

# 📘 小结

插槽类型 子组件写法 父组件使用方式
默认插槽 <slot></slot> 直接写内容
具名插槽 <slot name="footer"></slot> <template #footer>
作用域插槽 <slot name="info" :msg="xx" :count="yy"></slot> <template #info="{ msg, count }">

是否需要我帮你补上 子组件中带插槽的动态内容（如 v-for、v-if） 的写法？那样可以看到插槽在条件渲染或循环中的高级用法。

← uniapp 条件编译 →