Attributes 继承

  1. https://cn.vuejs.org/guide/components/attrs.html#attribute-inheritance
  2. 父组件 App.vue。
1
2
3
4
5
6
7
8
9

<template>
  <div>
    <MyButton class="large" />
  </div>
</template>

<script setup>
import MyButton from './components/MyButton.vue';
</script>
  1. 子组件 MyButton.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<template>
    <!-- <button class="large">Click Me</button> -->
    <button>Click Me</button>
</template>

<script setup>

</script>

<style scoped>
.large {
    color: pink;
}
</style>

对 class 和 style 的合并

  1. https://cn.vuejs.org/guide/components/attrs.html#class-and-style-merging
  2. 父组件 App.vue。
1
2
3
4
5
6
7
8
9

<template>
  <div>
    <MyButton class="large" />
  </div>
</template>

<script setup>
import MyButton from './components/MyButton.vue';
</script>
  1. 子组件 MyButton.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<template>
    <!-- <button class="btn large">Click Me</button> -->
    <button class="btn">Click Me</button>
</template>

<script setup>

</script>

<style scoped>
.large {
    color: pink;
}
</style>

v-on 监听器继承

  1. https://cn.vuejs.org/guide/components/attrs.html#v-on-listener-inheritance
  2. 父组件 App.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
  <div>
    <MyButton class="large" @click="onClick"/>
  </div>
</template>

<script setup>
import MyButton from './components/MyButton.vue';

function onClick() {
    console.log('onClick') // onClick
}
</script>
  1. 子组件 MyButton.vue。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<template>
    <button class="btn" @click="onClick">Click Me</button>
</template>

<script setup>
function onClick() {
    console.log('my-button') // my-button
}
</script>

<style scoped>
.large {
    color: pink;
}
</style>

深层组件继承

  1. https://cn.vuejs.org/guide/components/attrs.html#nested-component-inheritance
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!-- App.vue -->
<template>
  <div>
    <MyButton class="large" @click="onClick"/>
  </div>
</template>

<script setup>
import MyButton from './components/MyButton.vue';

function onClick() {
    console.log('onClick') // onClick
}
</script>

1
2
3
4
5
6
7
8

<!-- MyButton.vue -->
<template>
    <BaseButton />
</template>

<script setup>
import BaseButton from './BaseButton.vue';
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<!-- BaseButton.vue -->
<template>
    <button class="btn" @click="onClick">Click Me</button>
</template>

<script setup>
function onClick() {
    console.log('my-button') // my-button
}
</script>

<style scoped>
.large {
    color: pink;
}
</style>

禁用 Attributes 继承

  1. https://cn.vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance