0
点赞
收藏
分享

微信扫一扫

vue3中组件的使用(二)


子组件事件

子组件向父组件传递使用​​$emit()​​方法去触发事件。然后父组件使用​​v-on​​指令去监听子组件的自定义事件。使用的语法是​​$emit(event, [...num])​​,其中event指的是事件名,num表示参数,其中参数会传给事件监听器的回调函数。子组件想要向父组件传递的数据可以使用第二个参数。我们需要注意的是方法触发的事件名称需要与监听该事件的名称要完全匹配。

组件中使用双向绑定的指令。表单中使用双向绑定。下面的代码相当于​​v-model​​的绑定。​​update​​可以用来监听新值的改变。我们需要注意的是vue3中一个组件上可以绑定多个双向绑定的指令而不需要在组件中添加多余的选项也可以同步到不同的prop。双向绑定也可以使用自定义修饰符​​capitalize​​。绑定的字符串第一个字母大写,然后通过​​modelModifiers prop​​提供给组件。在​​created​​生命周期触发时,如果包含capitalize属性,值就会为​​true​​。

<input :value="num" @input="num = $event.target.value">

组件可以使用​​slot​​元素将自己当做自定义元素去使用,也可以具有属性和内容,然后组件定义的prop接受属性值去解决属性问题。我们可以通过插槽向组件中传递动态数据。我们需要注意的是父组件模板中的所有内容都是在父级作用域内去编译,子组件模板中的所有内容都是在子作用域内编译。当我们在内部使用​​slot​​时,可以设置默认值,这样当组件没有传递的时候也有值显示。

当组件中需要使用多个插槽时,为了区分各个插槽,我们可以使用​​name​​属性去定义。定义name之后,使用​​v-slot:name的名称​​,这样我们可以给不同的插槽都传递对应的内容。当插槽中没有使用name属性,那么就会默认为​​default​​。我们需要注意的是​​v-slot​​指令只能在​​template​​元素或组件元素上使用。插槽还能简称​​#​​去使用。作用域插槽的工作原理是将插槽内容包装到传递单个参数的函数去使用。插槽也可以是任何能够作为函数定义中的js表达式。插槽中我们也可以使用动态指令参数从而定义动态插槽名。这个名称需要在父级作用域下才能够正常解析。

举报

相关推荐

0 条评论