valid-slot-scope.md

enforce valid slot-scope attributes (vue/valid-slot-scope)

This rule checks whether every slot-scope (or scope) attributes is valid.

📖 Rule Details

This rule reports slot-scope attributes in the following cases:

• The slot-scope attribute does not have that attribute value. E.g. <div slot-scope></div>
• The slot-scope attribute have the attribute value which is extra access to slot data. E.g. <div slot-scope="prop, extra"></div>
• The slot-scope attribute have the attribute value which is rest parameter. E.g. <div slot-scope="...props"></div>

This rule does not check syntax errors in directives because it's checked by no-parsing-error rule.

👎 Examples of incorrect code for this rule:

<template>
  <TheComponent>
    <template slot-scope>
      ...
    </template>
  </TheComponent>
  <TheComponent>
    <template slot-scope="">
      ...
    </template>
  </TheComponent>
  <TheComponent>
    <template slot-scope="a, b, c">
      <!-- `b` and `c` are extra access. -->
      ...
    </template>
  </TheComponent>
  <TheComponent>
    <template slot-scope="...props">
      ...
    </template>
  </TheComponent>
</template>

👍 Examples of correct code for this rule:

<template>
  <TheComponent>
    <template slot-scope="prop">
      ...
    </template>
  </TheComponent>
  <TheComponent>
    <template slot-scope="{ a, b, c }">
      ...
    </template>
  </TheComponent>
  <TheComponent>
    <template slot-scope="[ a, b, c ]">
      ...
    </template>
  </TheComponent>
</template>

🔧 Options

Nothing.

👫 Related rules

• no-parsing-error