vue3组件传参的N种方法总结大全

一、父子组件传参

父子组件是最常见的关系，传参方式直接且高效。

1. Props（父传子）

• 原理：父组件通过属性绑定传递数据，子组件通过defineProps接收并使用。
• 示例：
  • 父组件（Parent.vue）：

    vue

    <template>
      <Child :message="parentMsg" :user="userInfo" />
    </template>
    <script setup>
    import Child from './Child.vue';
    const parentMsg = 'Hello from Parent';
    const userInfo = { name: 'Alice', age: 20 };
    </script>
    

  • 子组件（Child.vue）：

    vue

    <template>
      <p>{{ message }}</p>
      <p>{{ user.name }}</p>
    </template>
    <script setup>
    // 接收参数并指定类型（可选）
    const props = defineProps({
      message: String,
      user: {
        type: Object,
        required: true
      }
    });
    // 使用：props.message 或直接在模板中使用
    </script>
    

• 特点：单向数据流（子组件不能直接修改 props，需通过事件通知父组件修改）。

2. Emits（子传父）

• 原理：子组件通过emit触发事件并传递数据，父组件监听事件接收数据。
• 示例：
  • 子组件（Child.vue）：

    vue

    <template>
      <button @click="handleClick">Send Data</button>
    </template>
    <script setup>
    // 声明触发的事件（可选，增强类型校验）
    const emit = defineEmits(['sendData', 'update']);
    const handleClick = () => {
      emit('sendData', 'Data from Child'); // 传递单个值
      emit('update', { id: 1, status: 'done' }); // 传递对象
    };
    </script>
    

  • 父组件（Parent.vue）：

    vue

    <template>
      <Child @sendData="onReceive" @update="onUpdate" />
    </template>
    <script setup>
    const onReceive = (data) => {
      console.log('Received:', data); // 输出：Data from Child
    };
    const onUpdate = (obj) => {
      console.log('Updated:', obj); // 输出：{ id: 1, status: 'done' }
    };
    </script>
    

• 特点：适用于子组件向父组件传递交互结果（如表单提交、状态变更）。

3. v-model（双向绑定）

• 原理：语法糖，结合props和emits实现父子组件数据双向同步。
• 示例：
  • 子组件（Child.vue）：

    vue

    <template>
      <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
    </template>
    <script setup>
    defineProps(['modelValue']);
    defineEmits(['update:modelValue']);
    </script>
    

  • 父组件（Parent.vue）：

    vue

    <template>
      <Child v-model="inputValue" />
      <p>Parent Value: {{ inputValue }}</p>
    </template>
    <script setup>
    import { ref } from 'vue';
    const inputValue = ref('');
    </script>
    

• 扩展：支持多个 v-model（如v-model:name、v-model:age），需对应props和emits。

4. refs（父访问子组件数据 / 方法）

• 原理：父组件通过ref获取子组件实例，直接访问子组件的属性或方法。
• 示例：
  • 子组件（Child.vue）：

    vue

    <script setup>
    import { ref } from 'vue';
    const count = ref(0);
    const increment = () => count.value++;
    // 暴露给父组件的属性/方法（setup语法糖需显式暴露）
    defineExpose({ count, increment });
    </script>
    

  • 父组件（Parent.vue）：

    vue

    <template>
      <Child ref="childRef" />
      <button @click="accessChild">访问子组件</button>
    </template>
    <script setup>
    import { ref } from 'vue';
    import Child from './Child.vue';
    const childRef = ref(null);
    const accessChild = () => {
      console.log(childRef.value.count); // 访问属性
      childRef.value.increment(); // 调用方法
    };
    </script>
    

• 注意：避免过度依赖，优先通过 props/emits 通信，减少耦合。

二、祖孙 / 跨级组件传参

当组件层级较深（如祖父→父→子），使用provide/inject更简洁。

5. Provide/Inject（依赖注入）

• 原理：祖先组件通过provide提供数据，后代组件通过inject注入并使用，无视层级。
• 示例：
  • 祖先组件（Grandpa.vue）：

    vue

    <script setup>
    import { provide, ref } from 'vue';
    const theme = ref('light');
    // 提供静态数据或响应式数据
    provide('theme', theme);
    provide('user', { name: 'Bob' });
    </script>
    

  • 后代组件（Grandchild.vue）：

    vue

    <script setup>
    import { inject, watch } from 'vue';
    // 注入数据（可指定默认值）
    const theme = inject('theme', ref('dark'));
    const user = inject('user');
    // 响应式数据可直接使用或监听
    watch(theme, (newVal) => {
      console.log('Theme changed:', newVal);
    });
    </script>
    

• 特点：适用于跨多级传参，但数据追踪较难，建议配合 TypeScript 类型定义使用。
• 注意：若需修改注入的数据，建议在祖先组件中提供修改方法（如provide('setTheme', (val) => theme.value = val)），避免后代直接修改。

三、兄弟 / 任意组件传参

非父子 / 跨级的组件（如兄弟组件、不相关组件），可通过全局状态管理或事件总线实现。

6. Pinia/Vuex（全局状态管理）

• 原理：通过全局存储管理数据，任何组件都可读取或修改，适用于大型应用。
• 示例（Pinia）：
  • 定义 Store（stores/counter.js）：

    javascript

    import { defineStore } from 'pinia';
    export const useCounterStore = defineStore('counter', {
      state: () => ({ count: 0 }),
      actions: {
        increment() {
          this.count++;
        }
      }
    });
    

  • 组件 A（使用并修改）：

    vue

    <script setup>
    import { useCounterStore } from './stores/counter';
    const store = useCounterStore();
    store.increment(); // 调用方法修改状态
    </script>
    

  • 组件 B（读取）：

    vue

    <template>
      <p>Global Count: {{ store.count }}</p>
    </template>
    <script setup>
    import { useCounterStore } from './stores/counter';
    const store = useCounterStore();
    </script>
    

• 特点：适合共享复杂状态（如用户信息、购物车），支持响应式和开发者工具调试。

7. 事件总线（mitt）

• 原理：通过全局事件中心，组件可触发事件或监听事件，实现解耦通信。
• 步骤：

  安装 mitt：npm install mitt

  创建事件总线（bus.js）：

  javascript

  import mitt from 'mitt';
  export const bus = mitt();
  

  组件 A（触发事件）：

  vue

  <script setup>
  import { bus } from './bus';
  const sendData = () => {
    bus.emit('msg', 'Hello from A'); // 触发事件并传参
  };
  </script>
  

  组件 B（监听事件）：

  vue

  <script setup>
  import { bus, onUnmounted } from 'vue';
  onMounted(() => {
    // 监听事件
    bus.on('msg', (data) => {
      console.log('Received from A:', data);
    });
  });
  // 组件卸载时移除监听，避免内存泄漏
  onUnmounted(() => {
    bus.off('msg');
  });
  </script>
  

• 特点：轻量灵活，适合小型应用或简单场景，大型应用建议用 Pinia。

8. URL 参数（路由传参）

• 原理：通过路由的 query 或 params 传递数据，适用于页面级组件跳转。
• 示例（Vue Router）：
  • 跳转时传参：

    vue

    <template>
      <!-- query参数（显式在URL，如?name=Alice） -->
      <router-link :to="{ path: '/detail', query: { id: 1 } }">详情页</router-link>
      <!-- params参数（需在路由配置中定义，如/detail/1） -->
      <router-link :to="{ name: 'Detail', params: { id: 1 } }">详情页</router-link>
    </template>
    

  • 接收参数：

    vue

    <script setup>
    import { useRoute } from 'vue-router';
    const route = useRoute();
    console.log(route.query.id); // query参数
    console.log(route.params.id); // params参数
    </script>
    

• 特点：数据可通过 URL 共享，刷新页面不丢失（query），但适合传递简单数据（如 ID、筛选条件）。

四、其他特殊方式

9. 插槽（Slots）传参

• 原理：父组件通过插槽向子组件传递内容（含数据），子组件通过slot-scope接收。
• 示例：
  • 子组件（Child.vue）：

    vue

    <template>
      <div>
        <!-- 向插槽传递数据 -->
        <slot :item="user" :count="10"></slot>
      </div>
    </template>
    <script setup>
    const user = { name: 'Charlie' };
    </script>
    

  • 父组件（Parent.vue）：

    vue

    <template>
      <Child>
        <!-- 接收插槽传递的数据 -->
        <template #default="slotProps">
          <p>{{ slotProps.item.name }}</p>
          <p>{{ slotProps.count }}</p>
        </template>
      </Child>
    </template>
    

• 特点：适合传递带结构的内容，结合数据动态渲染。

总结与选择建议

根据场景选择：

• 父子组件优先用Props/Emits或v-model；
• 跨多级用Provide/Inject；
• 全局共享用Pinia；
• 简单跨组件用事件总线；
• 页面跳转用路由参数。

到此这篇关于vue3组件传参的N种方法的文章就介绍到这了,更多相关vue3组件传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论