Skip to content

Commit

Permalink
Chore: Translate the example Click Me #1115
Browse files Browse the repository at this point in the history
  • Loading branch information
tisma95 committed May 6, 2024
1 parent 38ab03c commit df3b58e
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions src/guide/components/attrs.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Lorsqu'un composant affiche un seul élément racine, les attributs implicitemen

```vue-html
<!-- template de <MyButton> -->
<button>click me</button>
<button>Cliquez-Moi</button>
```

Et un parent utilisant ce composant avec :
Expand All @@ -26,7 +26,7 @@ Et un parent utilisant ce composant avec :
Le DOM rendu final serait :

```html
<button class="large">click me</button>
<button class="large">Cliquez-Moi</button>
```

Ici, `<MyButton>` n'a pas déclaré `class` comme une prop acceptée. Par conséquent, `class` est traitée comme un attribut implicitement déclaré et automatiquement ajoutée à l'élément racine de `<MyButton>`.
Expand All @@ -37,13 +37,13 @@ Si l'élément racine du composant enfant a déjà des attributs `class` ou `sty

```vue-html
<!-- template de <MyButton> -->
<button class="btn">click me</button>
<button class="btn">Cliquez-Moi</button>
```

Ainsi, le DOM final rendu deviendrait :

```html
<button class="btn large">click me</button>
<button class="btn large">Cliquez-Moi</button>
```

### Héritage de l'écouteur "v-on" {#v-on-listener-inheritance}
Expand Down Expand Up @@ -80,7 +80,7 @@ Si vous **ne souhaitez pas** qu'un composant hérite automatiquement des attribu
<div class="composition-api">

Depuis la version 3.3, vous pouvez également utiliser [`defineOptions`](/api/sfc-script-setup#defineoptions) directement dans `<script setup>`:

```vue
<script setup>
defineOptions({
Expand Down Expand Up @@ -112,15 +112,15 @@ En utilisant notre composant exemple `<MyButton>` de la [section précédente](#

```vue-html
<div class="btn-wrapper">
<button class="btn">click me</button>
<button class="btn">Cliquez-Moi</button>
</div>
```

Nous voulons que tous les attributs implicitement déclarés tels que `class` et les écouteurs `v-on` soient appliqués au `<button>` sous-jacent, et non au `<div>`. Nous pouvons y parvenir avec `inheritAttrs: false` et `v-bind="$attrs"`:

```vue-html{2}
<div class="btn-wrapper">
<button class="btn" v-bind="$attrs">click me</button>
<button class="btn" v-bind="$attrs">Cliquez-Moi</button>
</div>
```

Expand Down

0 comments on commit df3b58e

Please sign in to comment.