Vue中$attrs與$listeners的使用教程
介紹
$attrs
繼承所有的父組件屬性（沒有通過 props 接收的屬性還有 class 類名 和 style 樣式 ）。
inheritAttrs：
是否非 props 屬性顯示在標簽最外層，默認值 true ，就是繼承所有的父組件屬性（除了 props 特定綁定外）作為普通的HTML特性應用在子組件的根元素上，如果你不希望組件的根元素繼承特性就設置 inheritAttrs: false? ,但是 class 還是會繼承。
$listeners
它是一個對象，能接收所有的方法綁定，里面包含了作用在這個組件上的所有監(jiān)聽器，配合 v-on="$listeners" 將所有的事件監(jiān)聽器指向這個組件的某個特定的子元素。
舉例
父組件中?
<template>
<div id="app">
<Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
</div>
</template>
<script>
import Son from "./components/son.vue";
export default {
name: "App",
components: {
Son,
},
};
</script>
<style></style>
子組件中
<template>
<div id="app">
<Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
</div>
</template>
<script>
import Son from "./components/son.vue";
export default {
name: "App",
components: {
Son,
},
};
</script>
<style></style>
可見，當 inheritAttrs 默認 false 時，屬性是傳入到子組件最外層的
當 inheritAttrs 為 true 后
當使用props接收屬性時，屬性就不會被顯示
總結：組件標簽上傳入的屬性如果子組件沒有接收會跑到子組件標簽最外層。
非 props 屬性可以通過 $attrs 接收 {屬性名：屬性值}
<template>
<div>
<img v-bind="$attrs" alt="" />
</div>
</template>
<script>
export default {
inheritAttrs: false,
};
</script>
<style scoped>
.img {
width: 100px;
height: 100px;
}
</style>
當給子組件綁定點擊事件時，是不會觸發(fā)點擊事件的，可以使用 .native 修飾符進行綁定成功
或者通過 $listeners 進行接收所有方法的綁定
子組件內(nèi)
結果
總結?
所有非props屬性都可以通過$attrs接收
使用：v-bind="$attrs" 將所有非props屬性綁定到相應標簽，也可以用于組件
所有組件上的方法綁定子組件都可以通過$listeners接收
使用：v-on="$listeners"將所有方法又綁定到組件相應標簽，也可以用于組件
到此這篇關于Vue中$attrs與$listeners的使用教程的文章就介紹到這了,更多相關Vue $attrs $listeners內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
keep-alive是Vue提供的一個抽象組件，用來對組件進行緩存，從而節(jié)省性能，由于是一個抽象組件，所以在頁面渲染完畢后不會被渲染成一個DOM元素。這篇文章主要介紹了vue的keep-alive中使用EventBus的方法,需要的朋友可以參考下2019-04-04
Vue2使用cube-ui?實現(xiàn)搜索過濾、高亮功能
cube-ui?是基于?Vue.js?實現(xiàn)的精致移動端組件庫，由于很長一段時間沒有學習cube-ui?的功能實現(xiàn)示例代碼了，今天通過本文給大家介紹下Vue2使用cube-ui?實現(xiàn)搜索過濾、高亮功能，感興趣的朋友跟隨小編一起看看吧2023-01-01
Element-UI中關于table表格的那些騷操作(小結)
這篇文章主要介紹了Element-UI中關于table表格的那些騷操作(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)表單單獨移除一個字段驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3+vuedraggable實現(xiàn)動態(tài)配置頁面
這篇文章主要為大家詳細介紹了Vue3如何利用vuedraggable實現(xiàn)動態(tài)配置頁面,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的可以參考一下2023-12-12
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了用vue 實現(xiàn)手機觸屏滑動的功能，文中通過示例代碼給大家介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了富文本編輯器vue2-editor實現(xiàn)全屏功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
el-table多選toggleRowSelection不生效解決方案
這篇文章主要給大家介紹了關于el-table多選toggleRowSelection不生效的解決方案,文中通過圖文以及代碼將解決辦法介紹的非常詳細,需要的朋友可以參考下2023-08-08
相信大家做項目的時候,功能中都有導出模塊,下面這篇文章主要給大家介紹了關于vue導出excel表格的詳細教程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05