Using Emit for Parent-Child Communication in Vue

{
  "title": "Using Emit for Parent-Child Communication in Vue",
  "description": "Explore best practices for using the emit function to facilitate communication between parent and child components.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-emit-declaration",
      "description": "Ensure all emitted events are explicitly declared using the `emits` option or `defineEmits` macro to enhance code readability and maintainability.",
      "severity": "warning",
      "pattern": "export default { emits: [ ... ] }",
      "fix": "Add an `emits` array to the component options, listing all emitted events."
    },
    {
      "id": "vue-emit-naming-convention",
      "description": "Use kebab-case for event names in templates and camelCase in scripts to maintain consistency and avoid potential issues.",
      "severity": "warning",
      "pattern": "@event-name",
      "fix": "Rename the event to follow the kebab-case convention in templates and camelCase in scripts."
    },
    {
      "id": "vue-emit-payload-validation",
      "description": "Validate the payload of emitted events to ensure data integrity and prevent runtime errors.",
      "severity": "error",
      "pattern": "this.$emit('eventName', payload)",
      "fix": "Implement validation logic for the payload before emitting the event."
    },
    {
      "id": "vue-emit-avoid-root-emission",
      "description": "Avoid using `$root.$emit` for event propagation; prefer direct parent-child communication or state management solutions.",
      "severity": "warning",
      "pattern": "this.$root.$emit",
      "fix": "Refactor the code to use direct parent-child communication or a state management solution like Vuex."
    },
    {
      "id": "vue-emit-avoid-parent-emission",
      "description": "Avoid using `$parent.$emit` as it tightly couples components and reduces reusability.",
      "severity": "warning",
      "pattern": "this.$parent.$emit",
      "fix": "Refactor the code to use direct parent-child communication or a state management solution like Vuex."
    }
  ]
}