vue组件传参的八种方式详细总结

在Vue中，组件之间的传参是构建动态和交互性用户界面的关键。Vue提供了多种方式来传递参数，以下是对这些方式的详细说明：

一、Props

Props是Vue中组件之间传递数据的一种常见方式。父组件可以通过props将数据传递给子组件，子组件通过props选项来接收这些数据。

• 使用方式：

  1. 父组件中定义要传递的数据，并在使用子组件时以属性的形式传递。
  2. 子组件中通过props选项来声明要接收的数据。

• 示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '这是来自父组件的消息'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
};
</script>

二、$emit

emit是Vue中组件之间通过事件进行数据传递的一种方式。子组件可以通过emit方法触发一个自定义事件，并将数据传递给父组件。父组件可以通过在子组件标签上监听这个自定义事件来接收数据。

• 使用方式：

  1. 子组件中定义要触发的事件，并通过$emit方法传递数据。
  2. 父组件中在子组件标签上监听该事件，并定义处理函数来接收数据。

• 示例：

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

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('childMessage', '这是来自子组件的消息');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @childMessage="handleChildMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildMessage(message) {
      console.log(message);
    }
  }
};
</script>

三、Provide/Inject

Provide/Inject是Vue中组件之间通过依赖注入进行数据传递的一种方式。父组件可以通过provide选项提供数据，子组件（包括跨层级的子孙组件）可以通过inject选项注入这些数据。

• 使用方式：

  1. 父组件中通过provide选项提供数据。
  2. 子组件中通过inject选项注入所需的数据。

• 示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: '这是通过provide/inject传递的消息'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

四、attrs和listeners

$attrs：

• 概述：$attrs是一个对象，它包含了父作用域中没有被prop接收的所有属性（不包含class和style属性）。可以通过v-bind="$attrs"直接将这些属性传入内部组件，实现父组件隔代向孙组件传值。

• 举例：父组件将name和age属性传递给子组件，子组件通过v-bind="$attrs"将这些属性（以及可能的其他未声明的属性）传递给孙组件。孙组件通过props接收这些属性。

<!-- 父组件（Parent.vue） -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent :name="parentName" :age="parentAge" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      parentName: 'Tom',
      parentAge: 30
    };
  }
};
</script>

<!-- 子组件（ChildComponent.vue） -->
<template>
  <div>
    <h2>子组件</h2>
    <GrandChildComponent v-bind="$attrs" />
  </div>
</template>

<script>
import GrandChildComponent from './GrandChildComponent.vue';
export default {
  components: { GrandChildComponent }
};
</script>

<!-- 孙组件（GrandChildComponent.vue） -->
<template>
  <div>
    <h3>孙组件</h3>
    <p>父组件传递的名字：{{ name }}</p>
    <p>父组件传递的年龄：{{ age }}</p>
  </div>
</template>

<script>
export default {
  props: ['name', 'age']
};
</script>

$listeners：

• 概述：$listeners是一个对象，它包含了父组件中所有的v-on事件监听器（不包含.native修饰器的）。可以通过v-on="$listeners"将这些事件监听器传入内部组件，实现孙组件隔代向父组件传值。

• 举例：

  在上述例子中，如果孙组件需要向父组件发送事件，可以通过$emit触发事件，并在子组件中使用v-on="$listeners"将这些事件传递给父组件。然而，需要注意的是，$listeners通常用于孙组件向隔代的父组件发送事件，而不是直接用于父子组件间的通信。在实际应用中，父子组件间的通信更多地使用$emit和v-on。

五、parent和children

parent和children是Vue中组件之间通过访问父组件和子组件实例进行数据传递的一种方式。子组件可以通过parent属性访问父组件实例，父组件可以通过children属性访问子组件实例（注意：$children是一个数组，包含了所有子组件的实例，但不保证顺序）。

• 使用方式：

  1. 通过parent或children访问相应的组件实例。
  2. 直接在组件实例上访问或修改数据。
• 举例

注意：通常不建议直接使用$children进行组件间的通信，因为它可能导致代码难以维护和理解。如果需要访问子组件的数据或方法，更推荐使用ref或provide/inject等机制。

<!-- 父组件（Parent.vue） -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  },
  methods: {
    parentMethod() {
      console.log('Parent method called');
    }
  }
};
</script>

<!-- 子组件（ChildComponent.vue） -->
<template>
  <div>
    <h2>子组件</h2>
    <button @click="callParentMethod">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod();
    }
  }
};
</script>

六、Vuex

Vuex是Vue中一种专门用于状态管理的插件。通过在Vuex中定义全局的状态，并在组件中使用getter和mutation来访问和修改状态，可以实现组件之间的数据传递和共享。

• 使用方式：

  1. 安装Vuex并创建store。
  2. 在store中定义状态、mutation、action等。
  3. 在组件中通过this.$store访问store，并使用getter获取状态，使用mutation或action修改状态。
• 举例

<!-- 父组件（Parent.vue） -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  computed: {
    ...mapState(['counter'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

<!-- 子组件（ChildComponent.vue） -->
<template>
  <div>
    <h2>子组件</h2>
    <p>计数器：{{ counter }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState(['counter'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

<!-- Vuex Store（store.js） -->
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    increment(state) {
      state.counter++;
    }
  }
});

七、插槽（Slot）

        插槽是一种让父组件能够向子组件指定内容插入点的机制。通过插槽，父组件可以将自己的模板内容传递给子组件，并在子组件的指定位置渲染出来。

        插槽分为默认插槽、具名插槽和作用域插槽三种类型。

• 使用方式：

  1. 在子组件中定义插槽。
  2. 在父组件中使用子组件时，通过插槽向子组件传递内容。
• 举例

默认插槽

默认插槽是最基本的插槽类型，用于在组件内传递和显示任意内容。如果没有给插槽命名，Vue会将内容传递到默认插槽中。

//子组件
<template>
  <div class="my-component">
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>
//父组件
<template>
  <MyComponent>
    <p>This is some default slot content!</p>
  </MyComponent>
</template>

具名插槽

具名插槽允许我们在组件中定义多个插槽，每个插槽都有一个唯一的名称。这样可以在组件中更精确地控制内容的显示位置。

//子组件（MyComponent.vue）
<template>
  <div class="my-component">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 默认插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot><!--具名插槽-->
    </footer>
  </div>
</template>
//父组件
<template>
  <MyComponent>
    <template v-slot:header>
      <h1>Header Content</h1>
    </template>
    <p>This is some default slot content!</p>
    <template v-slot:footer>
      <p>Footer Content</p>
    </template>
  </MyComponent>
</template>

在这个例子中，<h1>Header Content</h1>将会显示在<slot name="header"></slot>位置，<p>Footer Content</p>将会显示在<slot name="footer"></slot>位置，而默认插槽中的内容仍会显示在<slot></slot>位置。

作用域插槽

作用域插槽是一种特殊类型的插槽，允许我们在父组件中访问子组件的数据。这在需要动态渲染内容时特别有用。

//子组件（MyComponent.vue）
<template>
  <div class="my-component">
    <slot :data="someData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someData: 'Hello from MyComponent!'
    };
  }
};
</script>
//父组件
<template>
  <MyComponent v-slot:default="slotProps">
    <p>{{ slotProps.data }}</p>
  </MyComponent>
</template>

在这个例子中，slotProps.data将会是'Hello from MyComponent!'，并且会显示在父组件的<p>标签内。

八、事件总线（Event Bus）

事件总线的概念

事件总线是一个设计模式，它充当一个中间人，负责监听各个组件发布的事件，并分发给订阅这些事件的其他组件。在Vue中，事件总线通常是一个新的Vue实例，它提供了$emit、$on和$off方法，分别用于触发事件、监听事件和移除事件监听。

• $emit：用于触发事件，并传递相关数据。
• $on：用于监听事件，并定义事件触发时的回调函数。
• $off：用于移除事件监听，防止内存泄漏。

• 使用方式：

  1. 创建一个空的Vue实例作为事件总线。
  2. 组件通过事件总线监听和触发事件来传递数据。

事件总线的实现步骤

1. 创建事件总线：

   • 你可以在一个单独的.js文件中创建一个新的Vue实例，并将其导出为事件总线。
   • 或者，你也可以在Vue项目的入口文件（如main.js）中，将事件总线挂载到Vue的原型上，使其成为全局可用的。

2. 在组件中引入事件总线：

   • 使用import语句将事件总线引入到你需要使用它的组件中。

3. 触发和监听事件：

   • 使用$emit方法在组件中触发事件，并传递相关数据。
   • 使用$on方法在另一个组件中监听这个事件，并定义回调函数来处理接收到的数据。

4. 移除事件监听：

   • 在组件销毁之前，使用$off方法移除所有不再需要的事件监听，以防止内存泄漏。

事件总线的例子

假设我们有两个兄弟组件ComponentA和ComponentB，它们需要通过事件总线进行通信。

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

import Vue from 'vue';
export const EventBus = new Vue();

2. 在组件中引入事件总线并使用：

ComponentA.vue

<template>
  <button @click="sendMessage">Send Message to ComponentB</button>
</template>

<script>
import { EventBus } from '../event-bus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-from-a', 'Hello from Component A!');
    }
  }
};
</script>

ComponentB.vue：

<template>
  <div>
    <p>Message from ComponentA: {{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from '../event-bus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message-from-a', (msg) => {
      this.message = msg;
    });
  },
  beforeDestroy() {
    EventBus.$off('message-from-a');
  }
};
</script>

在这个例子中，当ComponentA中的按钮被点击时，它会通过事件总线触发一个名为message-from-a的事件，并传递一条消息。然后，ComponentB会监听这个事件，并在接收到消息时更新其数据。最后，在ComponentB销毁之前，它会移除对message-from-a事件的监听，以防止内存泄漏。

事件总线的优缺点

优点：

• 灵活性：事件总线允许组件之间进行灵活的通信，不受组件层级结构的限制。
• 解耦性：通过事件总线进行通信的组件之间不需要直接引用或依赖彼此，降低了组件之间的耦合度。

缺点：

• 调试困难：随着应用程序规模的增大，事件总线中的事件和监听器可能会变得非常复杂和难以管理。
• 内存泄漏风险：如果忘记在组件销毁前移除事件监听器，可能会导致内存泄漏。

因此，在使用事件总线时，建议制定明确的事件命名规范，并在组件销毁前及时移除不再需要的事件监听器。此外，对于大型或复杂的应用程序，可以考虑使用更高级的状态管理解决方案（如本篇第六个 Vuex）来替代事件总线。

码字不易，字字皆心血。在此，诚挚地请求各位友友们动动手指，给予一个点赞，让这份努力得到认可与鼓励。友友们的每一次点赞，都是对我莫大的支持与激励！

原文地址：https://blog.csdn.net/m0_64455070/article/details/143625597

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！