vue3.0透传属性和事件的使用方式举例

更新时间：2024年01月20日 09:39:31 作者：A小博.

这篇文章主要给大家介绍了关于vue3.0透传属性和事件使用的相关资料,透传attribute指的是传递给一个组件,却没有被该组件声明为props或emits的attribute或者v-on事件监听器,需要的朋友可以参考下

如何“透传属性和事件”

父组件在使用子组件的时候，如何“透传属性和事件”给子组件呢？

透传属性和事件并没有在子组件中用props和emits声明
透传属性和事件最常见的如@click和class、id、style
当子组件只有一个根元素时，透传属性和事件会自动添加到该根元素上；如果根元素已有class或style属性，它会自动合并

组合式API测试：

父组件App.vue

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

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透传的属性（style，class，title）在子组件中并没有在 props 声明 -->
    <!-- 透传的事件（click）在子组件中并没有在 emits 声明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="纸片"
        @click="say"
    />
</template>

子组件 Chip.vue

<template>
    <!-- 
        当子组件只有一个根元素时，透传属性和事件会自动添加到该根元素上
        如果根元素已有 class 或 style 属性，它会自动合并
     -->
    <button class="chip" style="box-shadow: 0 0 8px grey;">
        普通纸片
    </button>
</template>

<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
}

.rounded {
    border-radius: 100px;
}
</style>

渲染结果：

如何禁止“透传属性和事件”

当子组件只有一个根元素时，透传属性和事件会自动添加到该根元素上，那怎么阻止呢？
在选项式 API 中，你可以在组件选项中设置inheritAttrs: false来阻止；
在组合式 API 的<script setup>中，你需要一个额外的<script>块来书写inheritAttrs: false选项声明来禁止

组合式API测试：

父组件App.vue

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

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透传的属性（style，class，title）在子组件中并没有在 props 声明 -->
    <!-- 透传的事件（click）在子组件中并没有在 emits 声明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="纸片"
        @click="say"
    />
</template>

子组件 Chip.vue

<script>
export default {
    inheritAttrs: false // 阻止自动透传给唯一的根组件
}
</script>

<!-- 
    在组合式 API 的 <script setup> 中，
    你需要一个额外的 <script> 块来书写 inheritAttrs: false 选项声明来禁止 
-->
<script setup></script>

<template>
    <!-- 
        当子组件只有一个根元素时，透传属性和事件会自动添加到该根元素上
        如果根元素已有 class 或 style 属性，它会自动合并
     -->
    <button class="chip" style="box-shadow: 0 0 8px grey;">
        普通纸片
    </button>
</template>

<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
}

.rounded {
    border-radius: 100px;
}
</style>

多根元素的“透传属性和事件”

多根节点的组件并没有自动“透传属性和事件”的行为，由于Vue不确定要将“透传属性和事件”透传到哪里，所以我们需要v-bind="$attrs"来显式绑定，否则将会抛出一个运行时警告。

组合式API测试：

父组件App.vue

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

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透传的属性（style，class，title）在子组件中并没有在 props 声明 -->
    <!-- 透传的事件（click）在子组件中并没有在 emits 声明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="纸片"
        @click="say"
    />
</template>

子组件Chip.vue

<template>
    <!-- 多根节点的组件并没有自动“透传属性和事件”的行为 -->
    <button class="chip">
        普通纸片
    </button>
    <hr>
    <button class="chip" v-bind="$attrs">
        普通纸片
    </button>
    <hr>
    <button class="chip" v-bind="$attrs">
        普通纸片
    </button>
</template>
<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
}
.rounded {
    border-radius: 100px;
}
</style>

访问“透传属性和事件”

在选项式 API 中，我们可通过this.$attrs来访问“透传属性和事件”
在组合式 API 中的<script setup>中引入useAttrs()来访问一个组件的“透传属性和事件”

组合式API测试：

父组件App.vue

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

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透传的属性（style，class，title）在子组件中并没有在 props 声明 -->
    <!-- 透传的事件（click）在子组件中并没有在 emits 声明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="纸片"
        @click="say"
    />
</template>

子组件Chip.vue

<script setup>
import { useAttrs } from 'vue';
// 透传的属性和事件对象
let attrs = useAttrs()
 // 在 JS 中访问透传的属性和事件
function showAttrs() {
    console.log(attrs)
    console.log(attrs.class)
    console.log(attrs.title)
    console.log(attrs.style)
    attrs.onClick()
}
</script>
<template>
    <button class="chip" v-bind="attrs">
        普通纸片
    </button>
    <hr>
    <h6>{{ attrs }}</h6>
    <ul>
        <li>{{ attrs.title }}</li>
        <li>{{ attrs.class }}</li>
        <li>{{ attrs.style }}</li>
    </ul>
    <button @click="attrs.onClick()">执行透传的事件</button>
    <hr>
    <button @click="showAttrs">在 JS 中访问透传的属性和事件</button>
</template>
<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
    margin: 10px;
}
.rounded {
    border-radius: 100px;
}
</style>

注意：

虽然这里的attrs对象总是反映为最新的“透传属性和事件”，但它并不是响应式的 (考虑到性能因素)，你不能通过侦听器去监听它的变化
如果你需要响应性，可以使用prop或者你也可以使用onUpdated()使得在每次更新时结合最新的attrs执行副作用

总结

到此这篇关于vue3.0透传属性和事件使用的文章就介绍到这了,更多相关vue3.0透传属性和事件使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue cli3适配所有端方案的实现
这篇文章主要介绍了vue cli3适配所有端方案的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue的混合继承详解
这篇文章主要介绍了Vue的混合继承，有需要的朋友可以借鉴参考下，希望能够有所帮助，希望能够给你带来帮助
2021-11-11
Vue接入高德地图的完整实例
近期在用vue做一个环保类的项目,要求使用高德地图,下面这篇文章主要给大家介绍了关于Vue接入高德地图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
深入理解vue中的$set
这篇文章主要介绍了深入理解vue中的$set,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue脚手架搭建项目的兼容性配置详解
这篇文章主要介绍了vue脚手架搭建项目的兼容性配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue.js实现立体计算器
这篇文章主要为大家详细介绍了Vue.js实现立体计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
vue实现行列转换的一种方法
这篇文章主要介绍了vue实现行列转换的一种方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
vue函数@click.prevent的使用解析
这篇文章主要介绍了vue函数@click.prevent的使用解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue实现设置载入动画和初始化页面动画效果
今天小编就为大家分享一篇vue实现设置载入动画和初始化页面动画效果，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
在vue中使用vuex,修改state的值示例
今天小编就为大家分享一篇在vue中使用vuex,修改state的值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11