지시문에 데이터를 전달하시겠습니까?

지시문에 데이터를 전달하시겠습니까?

문서에는 다양한 인수를 디렉티브에 전달할 수 있다고 기재되어 있습니다.

다음 값을 전달하고 싶습니다.

v-my-directive="test"

하지만 다음과 같은 오류가 발생합니다.

Property or method "test" is not defined on the instance but referenced during render

지시문에 문자열을 전달하려면 어떻게 해야 합니까?

값은 정규 JavaScript 표현식입니다.이 방법으로 문자열을 전달하려면'test', 사용방법:

v-my-directive="'test'"

데모:

Vue.directive('my-directive', function (el, binding) {
  console.log('directive expression:', binding.value)  // => "test"
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <div v-my-directive="'test'"></div>
</div>

문자열을 따옴표로 묶어야 합니다.따옴표로 묶지 않으면 이 문자열은test컴포넌트 컨텍스트의 변수(그것들)props또는data):

v-my-directive="'test'"

커스텀 디렉티브 내에서 전달된 값에 액세스 할 수 있습니다.binding.value:

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

이 가이드의 「커스텀 디렉티브」의 장을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/50005159/pass-data-to-a-directive