用最通俗的方式了解props/$emit、v-model、.sync语法糖的功能，高效实现Vue组件通信

2023-12-01 23:03:51

前言

在Vue项目中，组件化开发是必不可少的，它可以帮助我们更好地组织代码，提高开发效率。而组件之间的数据通信又是组件化开发中必不可少的环节。Vue提供了多种组件通信方式，其中最常用的就是props/$emit、v-model和.sync语法糖。本篇文章将详细讲解这几种方式的用法和适用场景，帮助您轻松实现组件之间的数据传递。

props

props是用来传递数据从父组件到子组件的。父组件需要在子组件的定义中声明需要传递的数据，子组件则可以在其模板中使用这些数据。

示例

<!-- 父组件 -->
<template>
  <ChildComponent :message="message" />
</template>

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

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

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

在上面的示例中，父组件将message数据传递给子组件，子组件可以通过props.message访问这个数据。

$emit

emit是用来传递数据从子组件到父组件的。子组件可以使用emit方法触发一个自定义事件，并将数据作为参数传递给父组件。父组件可以在子组件的定义中声明需要监听的自定义事件，并在事件触发时执行相应的操作。

示例

<!-- 子组件 -->
<template>
  <div>
    <input type="text" v-model="message">
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    updateMessage() {
      this.$emit('update-message', this.message)
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @update-message="updateMessage" />
  </div>
</template>

<script>
export default {
  methods: {
    updateMessage(message) {
      this.message = message
    }
  }
}
</script>

在上面的示例中，子组件使用$emit方法触发了一个名为update-message的自定义事件，并将message数据作为参数传递给了父组件。父组件在子组件的定义中声明了对update-message自定义事件的监听，并在事件触发时执行updateMessage方法，从而更新了父组件的message数据。

v-model

v-model是Vue提供的一个语法糖，它可以简化数据在父组件和子组件之间的传递。v-model本质上是一个组合，它将props和$emit结合起来，允许父组件直接修改子组件的数据，而无需显式地触发自定义事件。

示例

<!-- 父组件 -->
<template>
  <ChildComponent v-model="message" />
</template>

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

<!-- 子组件 -->
<template>
  <div>
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
  props: ['message'],
  emits: ['update-message']
}
</script>

在上面的示例中，父组件使用v-model将message数据传递给子组件，并允许子组件修改这个数据。当子组件修改message数据时，它会自动触发update-message自定义事件，并将message数据作为参数传递给父组件。父组件可以在子组件的定义中声明对update-message自定义事件的监听，并在事件触发时执行相应的操作。

sync

sync是Vue提供的一个语法糖，它可以让父组件和子组件的数据双向绑定。这意味着父组件和子组件都可以修改对方的数据，而无需显式地触发自定义事件。

示例

<!-- 父组件 -->
<template>
  <ChildComponent v-model="message" />
</template>

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

<!-- 子组件 -->
<template>
  <div>
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
  props: ['message'],
  emits: ['update-message']
}
</script>