构建强大 Vue 应用：理解组件传参的八种方式

2023-11-13 00:23:24

从基础到进阶，剖析 Vue 组件传参八大法门

在 Vue 生态圈中，组件是构建应用程序的基石。它们不仅可以复用代码，还能够有效组织和管理复杂应用。而组件之间的通信则是构建大型应用的关键。本文将从基础到进阶，剖析 Vue 组件传参的八大法门，助您掌握组件间通信的精髓。

1. Props：组件间数据传递的桥梁

Props 是最基础的组件传参方式，它允许父组件向子组件传递数据。子组件通过 props 接收这些数据，并将其用作自己的数据。在父组件中，通过 props 传递数据的方式如下：

<template>
  <child-component :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, child!'
    }
  }
}
</script>

在子组件中，通过 props 接收数据的方式如下：

<template>
  <p>{{ message }}</p>
</template>

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

2. ref：引用子组件实例

ref 属性允许父组件引用子组件的实例。这在某些情况下非常有用，例如需要在父组件中访问子组件的某个方法或属性。在父组件中，通过 ref 引用子组件实例的方式如下：

<template>
  <child-component ref="child" />
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.someMethod()
    }
  }
}
</script>

在子组件中，访问父组件的方法或属性的方式如下：

<template>
  <p>{{ parentMessage }}</p>
</template>

<script>
export default {
  mounted() {
    this.parentMessage = this.$parent.message
  }
}
</script>

3. provide/inject：跨层级组件通信

provide/inject 是 Vue 中一种跨层级组件通信的方式。它允许祖先组件向其后代组件提供数据或方法。在祖先组件中，通过 provide 提供数据或方法的方式如下：

<template>
  <provide>
    <child-component />
  </provide>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello, child!'
    }
  }
}
</script>

在后代组件中，通过 inject 注入数据或方法的方式如下：

<template>
  <p>{{ message }}</p>
</template>

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

4. emit：组件间事件通信

emit 是 Vue 中一种组件间事件通信的方式。它允许子组件向父组件触发事件，父组件可以监听这些事件并做出相应处理。在子组件中，通过 emit 触发事件的方式如下：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click', 'I was clicked!')
    }
  }
}
</script>

在父组件中，通过监听事件并做出相应处理的方式如下：

<template>
  <child-component @click="handleChildClick" />
</template>

<script>
export default {
  methods: {
    handleChildClick(message) {
      alert(message)
    }
  }
}
</script>

5. slot：内容分发

slot 是 Vue 中一种内容分发的方式。它允许父组件将内容分发到子组件的不同位置。在父组件中，通过 slot 分发内容的方式如下：

<template>
  <child-component>
    <template v-slot:header>
      <h1>My Header</h1>
    </template>
    <template v-slot:body>
      <p>My Body</p>
    </template>
  </child-component>
</template>

在子组件中，通过 slot 接收内容的方式如下：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="body"></slot>
  </div>
</template>

6. attrs 和 listeners：传递任意属性和事件监听器

attrs 和 listeners 是 Vue 中两种特殊的属性，它们允许子组件接收父组件传递的任意属性和事件监听器。在父组件中，通过传递任意属性和事件监听器的方式如下：

<template>
  <child-component :attrs="attrs" @listeners="listeners" />
</template>

在子组件中，通过接收任意属性和事件监听器的方式如下：

<template>
  <div>
    <p>{{ attrs.message }}</p>
    <button @click="listeners.click">Click me</button>
  </div>
</template>

7. Custom Events：自定义事件

Custom Events 是 Vue 中一种自定义事件的方式。它允许组件触发自定义事件，其他组件可以监听这些事件并做出相应处理。在组件中，通过触发自定义事件的方式如下：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'I was clicked!')
    }
  }
}
</script>

在其他组件中，通过监听自定义事件并做出相应处理的方式如下：

<template>
  <child-component @custom-event="handleCustomEvent" />
</template>

<script>
export default {
  methods: {
    handleCustomEvent(message) {
      alert(message)
    }
  }
}
</script>

8. Event Bus：事件总线

Event Bus 是 Vue 中一种全局事件通信的方式。它允许组件通过一个中央事件总线进行通信。在组件中，通过 Event Bus 触发事件的方式如下：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
import Vue from 'vue'

export default {
  methods: {
    handleClick() {
      Vue.$emit('custom-event', 'I was clicked!')
    }
  }
}
</script>

在其他组件中，通过 Event Bus 监听事件并做出相应处理的方式如下：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  mounted() {
    Vue.$on('custom-event', (message) => {
      this.message = message
    })
  }
}
</script>