2023Vue3中的方法函数：掌握Vue3组件间通信的方法

Vue3是当前最流行的前端框架之一。它以其强大的功能和简单易用的API而备受好评。Vue3提供了许多方式来组织和交互各个组件，这包括组件间通信、状态管理、动态组件等等。在Vue3中，我们可以使用一些方法函数来实现组件间通信，让我们来掌握这些方法。

1. props

props是Vue3的一个重要的特性，它是用来定义组件的属性和传递数据的一种方式。如果你需要从一个组件向其子组件传递数据，你可以使用props。你可以在子组件中的props选项中指定一个数组，该数组中包含了你希望接受哪些属性。当你从父组件传递属性时，这些属性会自动传递到子组件中，并在子组件中可用。以下是一个简单的例子：

<template>
  <div>
    <Child :message="message" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

在Child组件中，我们可以通过props来接收数据：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

注意，在props选项中需要指定每个属性的类型，这样就可以确保传递到子组件中的数据类型是正确的。

2. emit

emit是Vue3中另一种常用的组件间通信方法。当你需要在一个子组件中触发一个事件时，你可以使用emit方法。在父组件中，你可以监听这个事件，来进行一些操作。以下是一个简单的例子：

<template>
  <div>
    <Child @alert="showAlert" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  methods: {
    showAlert(msg) {
      alert(msg)
    }
  }
}
</script>

在Child组件中，我们可以使用$emit来触发一个事件：

<template>
  <div>
    <button @click="onClick">Click Me</button>
  </div>
</template>
<script>
export default {
  methods: {
    onClick() {
      this.$emit('alert', 'Hello World!')
    }
  }
}
</script>

当用户点击按钮时，子组件将触发一个alert事件，并将一个消息传递到父组件中。

3. provide / inject

provide / inject是Vue3提供的另一个组件间通信方法。它与props和emit略有不同，它允许你向子组件提供一些数据。子组件可以通过inject选项来接收这个数据。以下是一个简单的例子：

<template>
  <div>
    <Child />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  provide: {
    message: 'Hello World!'
  },
  components: { Child }
}
</script>

在Child组件中，我们可以使用inject选项来接收这个数据：

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

注意，在inject选项中指定需要接收的数据的名称，这样就可以在子组件中直接使用它。

4. $parent / $children

$parent和$children是Vue3提供的另外两个组件间通信的工具。$parent用于从子组件中访问其父组件中的属性或方法，而$children用于从父组件访问其子组件中的属性或方法。由于这两个选项是Vue3中提供的，所以在Vue3将来的版本中可能会被废弃。

5. $attrs / $listeners

$attrs和$listeners是Vue3提供的两个神奇的选项。$attrs选项为组件提供了所有传递给它的属性，并且它们可以与子组件的props选项一起使用，如下所示：

<template>
  <div>
    <Child v-bind="$attrs" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    console.log(this.$attrs) // { message: "Hello World!" }
  }
}
</script>

在Child组件中：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

在上面的例子中，子组件可以使用$attrs选项来接收并定义对应的props选项。

$listeners选项则为组件提供了父组件中的所有事件监听器。这将允许你在子组件中使用这些事件监听器。如下所示：

<template>
  <div>
    <button v-on="$listeners">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$listeners) // { 'click': [f1] }
  }
}
</script>

当用户点击按钮时，父组件中的事件监听器将被触发。

总结

这篇文章列举了Vue3中常用的组件间通信方法。这些方法包括：props、emit、provide / inject、$parent / $children和$attrs / $listeners。这些方法可以帮助你更好地组织和交互各个组件，提高你的开发效率并提高用户体验。在实践中，你可能需要同时使用多种方法来实现你的业务目标，所以要确保你知道这些选项，并且知道它们在何时何地适用。