Vue3自定义指令参数修饰符值(3)

自定义指令参数修饰符值

在vue3中我们如何获取自定义的参数的内容，并根据业务来修改展示的内容呢,需要依靠mounted方法中的bindings参数来获取。

参考实例
directives/unit.js文件

export default function directiveUnit(app){app.directive("unit",{mounted(el,bindings){const defaultText = el.textContentlet unit = bindings.valueif(!unit){unit = "¥"}el.textContent = unit + defaultText;}})
}

同时我们需要在directives/index.js中引入

import directiveUnit from "./unit"export default function directives(app) {directiveUnit(app)
}

这里是我们的示例文件

<template><div class="app"><!-- 1.参数-修饰符-值  --><h2 v-why:kobe.abc.cba="message">哈哈哈</h2><!-- 2.价格拼接单位符号 --><h2 v-unit>{{ 111 }}</h2></div>
</template>  
<script setup>
import { ref } from 'vue';const counter = ref(0)const message = 'Hello world';
const vWhy = {mounted(el,bindings){console.log(bindings);el.textContent = bindings.value;}
}
</script>
<style scoped>
</style> 

感谢大家观看，我们下次再见