.native

vue自定义组件中我们一般在父组件中定义一个事件,然后在子组件中利用emit触发这个事件。此时,如果我们的父组件中的事件用.native修饰,那么就相当于这个事件给子组件的根元素绑定了。

加了.native后,相当于给子组件的根元素绑定了事件,也就是上面的input外的div元素。

$listeners

上面.native表示将事件绑定到子组件的根元素上,那如果不想绑定到根元素上,除了用emit主动触发外,还可以用v-on='$listeners',这个操作就表示把外层的事件绑定到自己这。

$listeners返回从父组件上绑定的各种事件。注意,$listeners中的事件不包括.native中的事件,因为.native事件已经给了子组件的根节点。

如果父组件中使用的是v-model,那么$listeners里面会包含一个input事件的方法,如果要让这个事件正常运转(把子组件的内容传达给父组件),需要稍微改写一下。

因为默认的v-model中的input事件传递的是事件对象本身,我们需要将$listeners中的input事件改写成传递内容的。

$attrs,$props,inheritAttrs

从父组件中通过v-bind,v-model或者直接写的属性值在子组件中都会在$attrs中(style和class不在其中),子组件中可以通过配置props定义子组件中的变量,props最大选择就是$attrs,props每选一个,$attrs中就少一个变量了。因此$props和$attrs的合集就是父组件传递下来的所有属性。

默认情况下$attrs属性(注意不是所有属性)会继承到子组件的根元素上,如果不想$attrs属性继承到子组件的根元素上,可以在子组件中设置inheritAttrs:false,同时可以用v-bind='$attrs'将$attr属性给到某个指定的元素上。(无论inheritAttrs设置true或false,class和style都不受的影响,它们会和子组件的根元素的class和style内容合并)

上面的例子中,父组件传了两个属性,name和title,props中取了一个name属性,那么$attrs中还剩下title。同时我们用inheritAttrs:false不让子组件的根元素继承$attr属性,并利用v-bind='$attr'把$attrs属性放到了input上。

v-bind.sync='***'

.sync和v-model比较像,可以同时绑定属性值和一个回调方法,例如v-bind:name.sync='name',那么相当于v-bind:name='name',v-on:update:name='name=$event'。也就是说在子组件中,可以通过emit('input:name',event.target.value)给父组件传回值。

比较注意的是bind.sync='obj'这种写法,这里的obj是一个对象,内部会把对象展开,然后每个属性执行一次v-bind:[key].sync='[key]'。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字