Vue 属性透传

Happier2024年9月27日...大约 4 分钟

基本概念

属性透传是指在 Vue 组件中，父组件传递给子组件的属性，如果子组件没有使用 props 或 emits 接收该属性，那么这些属性会自动传递给子组件的根元素

单文件组件

<!-- App.vue -->
<template>
  我是父组件
  <Student class="student" style="color:skyblue;" name="John" age="20" @click="handleClick">
  </Student>
</template>

<script setup>
import Student from './components/Student.vue'
const handleClick = () => {
  console.log('父组件的点击事件')
}
</script>

<style scoped>
.student {
  background-color: pink;
}
</style>

<!-- Student.vue -->
<template>
    <div ref="divRef" @click="handleClick">我是子组件{{ props.name }}</div>
</template>

<script setup>
import { onMounted, useTemplateRef } from 'vue'
const divRef = useTemplateRef('divRef')
const props = defineProps(['name'])
const emit = defineEmits(['click'])
onMounted(() => {
    console.log(divRef.value) // <div class="student" age="20" style="color: skyblue;">我是子组件John</div>
})
const handleClick = () => {
    console.log('子组件的点击事件')
}
</script>

HTML

<head>
    <style>
        .student {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="app">
        我是父组件
        <Student class="student" style="color:skyblue;" name="John" age="20" @click="handleClick"></Student>
    </div>
    <script type="module">
        import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        import Student from './Student.js'
        createApp({
            components: {
                Student
            },
            setup() {
                const handleClick = () => {
                    console.log('父组件的点击事件')
                }
                return {
                    handleClick
                }
            }
        }).mount('#app')
    </script>
</body>

// Student.js
import { onMounted, useTemplateRef } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
export default {
    props: ['name'],
    emits: ['click'],
    setup(props) {
        const divRef = useTemplateRef('divRef')
        onMounted(() => {
            console.log(divRef.value) // <div class="student" age="20" style="color: skyblue;">我是子组件John</div>
        })
        const handleClick = () => {
            console.log('子组件的点击事件')
        }
        return {
            props,
            handleClick
        }
    },
    template: `
        <div ref="divRef" @click="handleClick">我是子组件{{ props.name }}</div>`
}

class、style、age 属性会自动传递给子组件的根元素，而 name 属性则不会，因为子组件使用 props 接收了该属性，这里控制台不会打印 父组件的点击事件，因为子组件使用 emits 接收了该事件，如果不使用 emits 接收该事件，那么控制台将先打印 子组件的点击事件，然后打印 父组件的点击事件

属性合并

如果属性名相同会按照以下规则进行合并：

如果属性是 class 或 style，那么父组件传递的属性会追加到子组件的根元素的属性中进行合并
如果属性都是其他自定义的属性，那么父组件传递的属性会覆盖子组件的根元素的属性

深层组件透传

有些情况下一个组件会在根节点上渲染另一个组件，这种情况下，父组件传递给子组件的属性会自动传递给根节点渲染的组件，这种情况下称为深层组件透传

需要注意：

透传的属性不会包含已经声明过的 props 或 emits
透传的属性若符合声明，也可以被 props 或 emits 接收，来传入到深层组件中

禁用属性透传

如果不想属性自动透传，可以使用 inheritAttrs: false 来禁用属性透传

单文件组件

<!-- 在子组件中 -->
<script setup>
defineOptions({
    inheritAttrs: false
})
</script>

HTML

// 在子组件中
export default {
    inheritAttrs: false,
}

访问透传属性

单文件组件

在子组件 <script setup> 中可以通过 useAttrs 来访问透传的属性

在子组件模板中可以通过 $attrs 来访问透传的属性

<!-- App.vue -->
<template>
  我是父组件
  <Student class="student" style="color:skyblue;" name="John" age="20"></Student>
</template>

<script setup>
import Student from './components/Student.vue'
</script>

<style scoped>
.student {
  background-color: pink;
}
</style>

<!-- Student.vue -->
<template>
    <div>我是子组件{{ props.name }}{{ $attrs }}</div>
</template>

<script setup>
import { useAttrs } from 'vue'
defineOptions({
    inheritAttrs: false
})
const props = defineProps(['name'])
const attrs = useAttrs()
console.log(attrs) // { class: "student", style: { color: "skyblue" }, age: "20" }
</script>

HTML

在子组件中 attrs 会作为 setup 函数的第二个参数 (也就是上下文对象) 的 attrs 属性暴露

在子组件模板中可以通过 $attrs 来访问透传的属性

<head>
    <style>
        .student {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="app">
        我是父组件
        <Student class="student" style="color:skyblue;" name="John" age="20"></Student>
    </div>
    <script type="module">
        import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        import Student from './Student.js'
        createApp({
            components: {
                Student
            }
        }).mount('#app')
    </script>
</body>

// Student.js
export default {
    props: ['name'],
    inheritAttrs: false,
    setup(props, ctx) {
        console.log(ctx.attrs) // { class: "student", style: { color: "skyblue" }, age: "20" }
        return {
            props
        }
    },
    template: `
        <div>我是子组件{{ props.name }}{{ $attrs }}</div>`
}

透传属性对象不是响应式的，不能通过侦听器来监听其变化，可以使用 props 或使用 onUpdated() 生命周期钩子

多个根节点的属性透传

如果子组件有多个根节点，那么属性将不会自动透传，需要在子组件中使用 v-bind='$attrs' 手动指定绑定到哪个节点上

昵称

邮箱

网址

按正序
按倒序
按热度

Vue 属性透传

基本概念

属性合并

深层组件透传

禁用属性透传

访问透传属性

多个根节点的属性透传

预览: