Vue自定义指令不适用于模板标签

Question

我遇到了以下指令的问题，它适用于除模板标签之外的任何标签

  Vue.directive('count',{
  bind(el,b,v){
    console.log(b.value);
  },
  inserted(el,b,v){
        console.log(b.value);
  },
  update(el,b,v){
        console.log(b.value);
  }
});

new Vue({
  el: "#app"  ,
  data:{
     value:0
  }
})

<div id="app">
<button @click="value+=1">
inc value
</button>
   <template v-count="value">

   </template>

 <!--  <div v-count="value">

   </div> --> 
</div>

如果 div 上的注释被删除，指令会记录该值，但不会触发模板标签指令的钩子

这里jsfiddle 的问题

谢谢

Answer 1

模板标签实际上并没有自己挂载任何东西，所以它在 DOM 中没有位置，也没有绑定。在您的情况下，一个简单的解决方案是将 v-count="value" 放在按钮标签上。如果对该指令有更特殊的需求，而您只是给我们占位符代码，那么将其放在 SPAN 或 DIV 上将比模板更有意义。