以下是一个简单的示例：
父组件
<template>
<div>
<child-component custom-attribute="这是一个自定义属性"></child-component>
</div>
</template>
<script>
const app = Vue.createApp({});
app.component('child-component', {
template: '<p>{{ customAttribute }}</p>',
mounted() {
// 在子组件中可以访问非 prop 的属性
console.log(this.$attrs.customAttribute);
}
});
app.mount('#app');
</script>
在这个例子中，父组件通过 v-bind 绑定将 custom-attribute 这个非 prop 的属性传递给子组件。
子组件
<template>
<p>{{ customAttribute }}</p>
</template>
<script>
export default {
mounted() {
// 在子组件中可以通过 this.$attrs 访问非 prop 的属性
console.log(this.$attrs.customAttribute);
}
};
</script>
在子组件中，通过 this.$attrs 对象可以访问所有未被注册为 prop 的属性，包括父组件传递过来的非 prop 的属性。
需要注意的是，通过 $attrs 访问到的属性在子组件中是不会触发重新渲染的，因为 Vue 不会追踪这些属性的变化。如果你需要在子组件中对这些属性做响应式处理，建议使用 props 或通过自定义事件进行通信。
转载请注明出处：http://www.zyzy.cn/article/detail/494/Vue 3.0