组件子指令

Question

在这种情况下，指令 v-console 适用于 compo1 的整个 div 。

但是只想将指令应用于 input 。因此console.log应该输出输入字段。

什么是正确的方法？

<div id="app">
    <compo1 v-console>John</compo1>
</div>

Vue.component('compo1', {
    template: '<div>Hello <slot></slot><input type="text" name="test" value="This is my value"></div>'
});

Vue.directive('console', {
    inserted: function (el) {
        console.log(el);
    }
});
var app = new Vue({
    el: '#app'
});

Answer 1

尝试这样写：

<div id="app">
    <compo1 v-console><div slot>John</div></compo1>
</div>

同样，不是用元素文本包装的也是不好的做法。