vue3.0中自定义指令的使用
程序员文章站
2022-03-13 08:18:30
前言: 在vue3.0中使用我们的自定义指令。实现步骤:(全局定义点击的自定义属性)1、src/ 新建文件夹 directives,新建index.jsexport default (app) => { //自定义组件 app.directive('demo', (el, binding) => { el.addEventListener('click', () => { console.log(binding.value.co......
前言:
在vue3.0中使用我们的自定义指令。
实现步骤:(全局定义点击的自定义属性)
1、src/ 新建文件夹 directives,新建index.js
export default (app) => {
//自定义组件
app.directive('demo', (el, binding) => {
el.addEventListener('click', () => {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
})
}
2、main.js中
import directives from './directives/index.js'
const app = createApp(App)
directives(app)
3、页面使用
<el-button v-demo="{ color: 'white', text: 'hello!' }">自定义指令</el-button>
4、点击按钮,f12中显示
官方介绍:点我进入
官方介绍详情:
函数简写
在前面的例子中,你可能想在 mounted
和 updated
时触发相同行为,而不关心其他的钩子函数。那么你可以通过将这个回调函数传递给指令来实现:
app.directive('pin', (el, binding) => {
el.style.position = 'fixed'
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
})
#对象字面量
如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令函数能够接受所有合法的 JavaScript 表达式。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
app.directive('demo', (el, binding) => {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
#在组件中使用
和非 prop 的 attribute 类似,当在组件中使用时,自定义指令总是会被应用在组件的根节点上。
<my-component v-demo="test"></my-component>
1
app.component('my-component', {
template: `
<div> // v-demo 指令将会被应用在这里
<span>My component content</span>
</div>
`
})
和 attribute 不同,指令不会通过 v-bind="$attrs"
被传入另一个元素。
本文地址:https://blog.csdn.net/qq_41619796/article/details/114268175
上一篇: python 合并列表的八种方法
推荐阅读
-
解析在Android中为TextView增加自定义HTML标签的实现方法
-
在android开发中尽量不要使用中文路径的问题详解
-
解析Android中实现滑动翻页之ViewFlipper的使用详解
-
基于Android中Webview使用自定义的javascript进行回调的问题详解
-
如何在IE10中使用ActiveX筛选功能将信任的网站设成例外
-
ZBrush布尔运算中的并运算怎么使用?
-
解析Android中使用自定义字体的实现方法
-
HTML5中indexedDB 数据库的使用实例
-
Android开发使用自定义View将圆角矩形绘制在Canvas上的方法
-
vue.js中toast用法及使用toast弹框的实例代码