在Vue.js中将自定义指令应用于模板元素

cotxawn7 于 7个月前发布在 Vue.js

关注(0)|答案(1)|浏览(83)

我有一个自定义组件。在使用它时，我希望能够传递一个参数，以确定它是否会自动聚焦其中的一个元素。由于常规自动聚焦仅适用于页面加载，我已经根据示例here添加了一个自定义指令，并将其注册到主文件中：

app.directive('focus', {
  mounted: (el) => el.focus()
})

字符串
在自定义组件中，我添加了一个prop：

autofocus: {
 type: Boolean,
 default: false
},

型
在组件内部，如果我传递prop并在组件内部相关模板元素fx上的常规属性绑定中使用它，它就可以工作：

:autofocus="autofocus"

型
然而，如果我尝试在自定义指令上使用属性绑定，它就不起作用（指令不被应用），就像这样：

:v-focus="autofocus"

型
如果我在没有属性绑定的情况下对元素硬编码v-focus指令，那么该指令将按预期的方式应用。
所以，很明显你不能像对待属性一样对待自定义指令，但是有条件地将指令应用于模板元素的属性的正确方法是什么呢？

1条答案

您应该将绑定参数添加到指令定义中：

app.directive('focus', {
  mounted: (el, binding) => {
    if(binding.value){
      el.focus()
     }
  }
})

字符串
然后将prop作为指令绑定值传递：

<input  v-focus="autofocus"/>

型
指令自动绑定，无需使用:

现场演示

赞(0）回复(0）举报 7个月前