Link文字链接

对a标签的封装

 <template>
   <!-- class样式列表 包括类型 是否禁用 和下划线
   href链接
   绑定$attrs中的属性
    -->
   <a
     :class="[
       'el-link',
       type ? `el-link--${type}` : '',
       disabled && 'is-disabled',
       underline && !disabled && 'is-underline',
     ]"
     :href="disabled ? null : href"
     v-bind="$attrs"
     @click="handleClick"
   >
   <!-- 图标 -->
     <i :class="icon" v-if="icon"></i>
   <!-- 插槽 -->
     <span v-if="$slots.default" class="el-link--inner">
       <slot></slot>
     </span>
     <!-- 也可以这么使用<el-link >默认链接
     <template v-slot:icon>
       <i class="el-icon-eleme"></i>
     </template>
   </el-link> -->
   <!-- 具名插槽 -->
     <template v-if="$slots.icon"
       ><slot v-if="$slots.icon" name="icon"></slot
     ></template>
   </a>
 </template>
 ​
 <script>
 export default {
   name: "ElLink",
 ​
   props: {
     // 类型
     type: {
       type: String,
       default: "default",
     },
     // 是否下划线
     underline: {
       type: Boolean,
       default: true,
     },
     // 是否禁用状态
     disabled: Boolean,
     // 原生 href 属性
     href: String,
     // 图标类名
     icon: String,
   },
 ​
   methods: {
     // 点击事件 当没有被禁用 没有href属性时可以调用组件上定义的click
     handleClick(event) {
       if (!this.disabled) {
         if (!this.href) {
           this.$emit("click", event);
         }
       }
     },
   },
 };
 </script>
 ​

其中v-bind="$attrs"的作用是将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递，也就是说当没有使用props接收时可以获取到

MyGrandFather.vue

 <template>
   <MyFather name='2' age="1" gender="3"></MyFather>
 </template>
 ​
 <script>
 import MyFather from '@/view/MyFather'
 export default {
     components:{MyFather}
 }
 </script>

MyFather.vue

 
 <template>
   <MySon v-bind="$attrs"></MySon>
 </template>
 <script>
 import MySon from './MySon.vue';
 export default {
   //inheritAttrs:false,
     components:{
       MySon
     }
 }
 </script>

MySon.vue

 <template>
     <div>
       <div>1</div>
     </div>
 </template>
 <script>
 export default {
   //inheritAttrs:false,
   props:['age'],
   mounted(){
       console.log(this.$attrs);
     //{gender:'3',name:'2'}
   }
 }
 </script>

vm.$attrs的作用

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

此时的页面为

可以看到html标签上加上了属性，如果想去掉，加入inheritAttrs:false,

inheritAttrs的作用

默认情况下，父组件传递的，但没有被子组件解析为 props 的 attributes 绑定会被“透传”。这意味着当我们有一个单根节点的子组件时，这些绑定会被作为一个常规的 HTML attribute 应用在子组件的根节点元素上。当你编写的组件想要在一个目标元素或其他组件外面包一层时，可能并不期望这样的行为。我们可以通过设置 inheritAttrs 为 false 来禁用这个默认行为。这些 attributes 可以通过 $attrs 这个实例属性来访问，并且可以通过 v-bind 来显式绑定在一个非根节点的元素上。