Question

<template>
    <div>
        <img v-directive:dynamic_literal />
    </div>
</template>

E.g。 dynamic_literal ='ok' 这样在自定义指令中：

Vue.directive('directive', {
    bind(el, binding) {  binding.arg  // should return 'ok'

如何将dynamic_literal用作变量或常量，其值应在data或prop下分配。

我尝试使用v-directive：{{dynamic_literal}}和：v-directive =“dynamic_literal”但没有用。

提前致谢！

Answer 1

无法将动态参数传递给指令，但您可以创建一个中间组件，动态呈现通过prop传递的值。

export default {
  render(createElement) {
    return createElement(
      'img', {
        directives: [
          {
            name: 'directive',
            arg: this.literal,
          },
        ],
      }
    );
  },
  props: {
    literal: {
      type: String,
      required: true,
    },
  },
};

所以这段代码应该可以解决问题

<template>
    <div>
        <new-img-component :literal="dynamic_literal" />
    </div>
</template>

Answer 2

我认为你没有办法让参数动态，但值可以是。

console.clear()

Vue.directive("test", {
  bind(el, binding){
    console.log(binding)
  },
  update(el, binding){
    console.log(binding)
  }
})

new Vue({
  el:"#app",
  data:{
    dynamic_literal: 'ok'
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <h1 v-test="dynamic_literal">Hello World</h1>
  <button @click="dynamic_literal='not ok!'">Change literal</button>
</div>

请注意，当您运行上面的代码段时，单击按钮时value属性会在日志中发生更改。

Answer 3

有点晚了但也许有些用处......你可以通过使用传递给指令钩子函数的vnode参数来实际获得Vue指令中的动态参数。我们将使用参数本身作为我们想要在vnode的上下文中访问的属性名称。例如，这也适用于计算属性。

Vue.directive('directive', function(el, binding, vnode){
    el.innerHTML = vnode.context[binding.arg];
});

new Vue({
    el: '#app',
    template: '<div v-directive:argument></div>',
    data: {
        argument: 0
    },
    mounted() {
        setInterval(() => ++this.argument, 1000);
    }
});

（在这里使用function shorthand指令）

JSFiddle

Answer 4

为我工作：

public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException {
        ...
        OAuth2AuthenticationToken oauth2Authentication = new OAuth2AuthenticationToken(
            authenticationResult.getPrincipal(),
            authenticationResult.getAuthorities(),
            authenticationResult.getClientRegistration().getRegistrationId());
        oauth2Authentication.setDetails(authenticationDetails);

        OAuth2AuthorizedClient authorizedClient = new OAuth2AuthorizedClient(
            authenticationResult.getClientRegistration(),
            oauth2Authentication.getName(),
            authenticationResult.getAccessToken(),
            authenticationResult.getRefreshToken());

        this.authorizedClientRepository.saveAuthorizedClient(authorizedClient, oauth2Authentication, request, response);

        return oauth2Authentication;
}

使用<div v-mydirective:[dynamicArg]="foo">

进行访问

更多信息：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0003-dynamic-directive-arguments.md

Answer 5

我建议您可以尝试执行以下操作：

<div v-mydirective="{text: dynamic_literal}">

带有dynamic_literal的元素是您在组件的属性/数据中的变量

如何在vuejs自定义指令中传递动态参数

5 个答案: