1.v-bind="$attrs"
v-bind="$attrs"的妙用是在創(chuàng)建更高級別的組件悔耘，在封裝第三方組件時次舌，
可以自動將在父作用域中使用的v-bind的屬性自動綁定厢钧，
并向下傳入被封裝的使用了v-bind="$attrs"的組件。
一段摘自 vue 官網(wǎng)的介紹
包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute
綁定 (class 和 style 除外)机隙。當(dāng)一個組件沒有聲明任何 prop 時纽谒，
這里會包含所有父作用域的綁定 (class 和 style 除外)证膨，
并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級別的組件時非常有用。
例如我們封裝的custom-Image組件鼓黔，使用了v-bind="$attrs"之后央勒， 我們在custom-Image組件中不见，也擁有了el-image的幾乎所有屬性， 而且其作用效果和用法崔步，是和我們使用el-image是一樣的稳吮， 也就說我們可以看著el-image的文章去使用custom-Image。
2.v-on="$listeners"
v-on="
attrs"類似井濒， 它可以將父作用域中的使用v-on的時間監(jiān)聽器向下傳入到使用了v-on="
attrs"的功效類似灶似，只不過一個屬性一個是事件。還是custom-Image組件為例眼虱， 這時候custom-Image組件就擁有了el-image組件的幾乎所有事件喻奥。 而且其作用效果和用法，是和我們使用el-image是一樣的捏悬。
包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器撞蚕。
它可以通過 v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時非常有用。
一段摘自 vue 官網(wǎng)的介紹
三过牙、封裝el-image的代碼示例
使用custom-Image組件的示例
<custom-Image fit="fill" class="icon-img" :src="picPreview(expert)"></custom-Image>
封裝el-image為custom-Image組件的示例
<template>
? <div id="CustomImage">
? ? <el-image v-bind="$attrs" v-on="$listeners">
? ? ? <div slot="error" class="image-slot">
? ? ? ? <img :src="require('image-f/icon-empty-img.png')" alt="圖片加載失敗.png"/>
? ? ? </div>
? ? ? <div slot="placeholder" class="placeholder-slot">加載中...</div>
? ? </el-image>
? </div>
</template>
<script>
export default {
? name: 'CustomImage'
}
</script>
<style scoped lang="scss">
? #CustomImage {
? .image-slot {
? ? text-align: center;
? }
? .placeholder-slot {
? ? text-align: center;
? }
}
</style>
