书接上文！！！！

组件间通信4: v-model

v-model 是 Vue 提供的一个用于双向绑定的指令，它可以方便地在父组件和子组件之间进行双向数据绑定。

注意点：

  • v-model 实际上是语法糖，它简化了 value prop 和 input 事件的绑定。
  • 当使用 v-model 时，确保子组件正确实现了 input 事件。

示例

自定义输入框组件

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  props: ['value']
}
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

父组件

<template>
  <custom-input v-model="message" />
</template>

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

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

五、组件间通信5: sync 属性修饰符

sync 是 Vue 提供的一个属性修饰符，它可以方便地实现子组件向父组件传递数据并保持同步更新。

注意点：

  • sync 修饰符仅适用于 v-model 的情况。
  • 确保子组件正确实现了 update:value 事件。

示例

自定义输入框组件

<template>
  <input :value="value" @input="$emit('update:value', $event.target.value)">
</template>

<script>
export default {
  props: ['value']
}
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

父组件

<template>
  <custom-input :value.sync="message" />
</template>

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

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

六、组件间通信6: $attrs 与 $listeners

在 Vue 组件开发中，有时候需要在组件之间传递一些未被声明为 prop 的数据或监听父组件的事件，这时候可以使用 Vue 提供的 $attrs 和 $listeners 特殊属性来实现。

注意点：

  • $attrs 包含了父组件传递给子组件但在子组件中未被声明的属性。
  • $listeners 包含了父组件绑定在当前组件上的所有事件监听器。
  • 要禁用特性继承，请设置 inheritAttrs 为 false。

示例

组件

<template>
  <div>
    <input v-bind="$attrs" />
    <!-- 或者 -->
    <custom-component v-bind="$attrs" />
  </div>
</template>

<script>
export default {
  inheritAttrs: false // 禁用特性继承
}
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

组件

<template>
  <div v-on="$listeners">
    <input />
    <!-- 或者 -->
    <custom-component v-on="$listeners" />
  </div>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.