vue.js - 对子组件的指令

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'
});

标签： vue.jsdirective

Answer 1

试着这样写：

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

此外，不被元素文本包裹是不好的做法。