<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg> </template>
时间: 2023-06-26 17:08:59 浏览: 165
【JavaScript源代码】Vue中引入svg图标的两种方式.docx
这是一个 Vue 的组件模板,包含一个 SVG 图标元素。其中使用了动态绑定的 class 和 xlink:href 属性,以及继承父组件的事件监听器。具体解释如下:
- :class="svgClass":动态绑定 SVG 元素的 class 属性,值为组件实例的 svgClass 属性。
- aria-hidden="true":设置 SVG 元素的 aria-hidden 属性为 true,表示该元素不需要被辅助技术读取。
- v-on="$listeners":继承父组件的事件监听器,让组件支持父组件传递的所有事件。
- :xlink:href="iconName":动态绑定 SVG 的 xlink:href 属性,值为组件实例的 iconName 属性,表示使用该属性指定的图标。注意,xlink:href 是 SVG 中指定链接的属性名,用于引用外部资源。
阅读全文