1. 首頁 > 生活百科 > >

vue3中$attrs的變化與inheritAttrs的使用

生活百科

在vue3中的$attrs的變化$listeners已被刪除合并到$attrs中 。$attrs現在包括class和style屬性 。也就是說在vue3中$listeners不存在了 。vue2中$listeners是單獨存在的 。在vue3 $attrs包括class和style屬性, vue2中 $attrs 不包含class和style屬性 。在vue2中的$attrs在Vue 2中 ， attrs里面包含著上層組件傳遞的所有數據(除style和class)當一個組件聲明了prop時候 ， attrs里面包含除去prop里面的數據剩下的數據 。結合inheritAttrs:false，可以將傳遞下來的數據應用于其他元素，而不是根元素：父組件的屬性直接渲染在根節點上父頁面.vue
<template><div><TestCom title="父組件給的標題" aa="我是aa" bb="我是bb"></TestCom></div></template><script setup lang="ts">import TestCom from "../../components/TestCom.vue"</script>【vue3中$attrs的變化與inheritAttrs的使用】子組件.vue
<template><div class="root-son"><p>我是p標簽</p><span>我是span</span></div></template>

vue3中$attrs的變化與inheritAttrs的使用

文章插圖
我們發現父組件中的屬性直接是渲染在了 <div class="root-son"></div>這個節點上 。變為了 <div class="root-son" title="父組件給的標題" aa="我是aa" bb="我是bb"></div> 。因為在默認情況下，父組件的屬性會直接渲染在子組件的根節點上 ?！局攸c】然后有些情況我們希望是渲染在指定的節點上 。那怎么處理這問題呢？我們的 $attrs 和 inheritAttrs: false 這一對 ”好基友“閃亮登場如何讓父組件的屬性渲染在指定的節點上我們可以使用 $attrs 配合 inheritAttrs: false 可以將屬性渲染在指定的節點上子組件的代碼中新增 inheritAttrs: false//子組件<template><div class="root-son"><!--所有的屬性都將被這個元素p接收--><p v-bind="$attrs">我是p標簽</p><span>我是span</span></div></template><script lang="ts" setup>// 不讓子組件的根節點渲染屬性inheritAttrs: false</script>
vue3中$attrs的變化與inheritAttrs的使用

文章插圖
發現問題-根節點和指定節點都別渲染了屬性好家伙，你不是說$attrs 配合 inheritAttrs: false可以將屬性渲染在指定的節點上 。現在雖然渲染在指定節點上 。但是根節點也有 。這樣不好吧 。切 。走了 。走了 。菜雞 。這，這 ， 這，你別走呀 。等一會 。趕緊偷偷人偷偷去官網看一下出怎么說的 。原來是這樣的:<script setup> 可以和普通的 <script> 一起使用 。普通的 <script> 在有這些情況下或許會被使用到 。比如：無法在 <script setup> 中的聲明選項中去使用 inheritAttrs 或插件的自定義選項 。
vue3中$attrs的變化與inheritAttrs的使用

文章插圖
我們需要將代碼變為如下：<template><div class="root-son"><!--所有的屬性都將被這個元素p接收--><p v-bind="$attrs">我是p標簽</p><span>我是span</span></div></template><script>//無法在 <script setup> 中的聲明選項中去使用 inheritAttrs 。//所有只有在整一個<script>export default {inheritAttrs: false,customOptions: {}}</script><script lang="ts" setup> 你的代碼</script>
vue3中$attrs的變化與inheritAttrs的使用

文章插圖
TMD 又又發現問題了在瀏覽器中提示：[plugin:vite:vue] [@vue/compiler-sfc] <script> and <script setup> must have the same language type.TMD 又又發現問題了 。穩住 ， 我可以的 。在心里一直告訴自己，冷靜點，我可以解決這個問題的 。先看看它提示must have the same language type. 必須具有相同的語言類型小問題就是說必須要有一個類型 。我將script 上添加一個 lang="ts"就解決了 。我感覺自己又行了 。<template><div class="root-son"><p v-bind="$attrs">我是p標簽</p><span>我是span</span></div></template><script lang="ts">export default {inheritAttrs: false,customOptions: {}}</script><script lang="ts" setup></script>
vue3中$attrs的變化與inheritAttrs的使用

文章插圖
簡單的介紹 $listeners$listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器 。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用 。我的理解：因為$listeners 可以接收父級組件中(不含.native修飾器的) v-on 事件監聽器.所以在進行組件事件傳遞的時候非常有用 。很多時候我們對組件進行二次封裝的時候不可能將組件中的內置事件都拋出來 。這個時候 $listeners 就派上用場了 。在vue2中有 vue2中$listeners是單獨存在的 。vue3 被合并到$attrs中了 。

推薦閱讀