【vue】组件插槽、组件自定义事件

最新推荐文章于 2024-09-25 14:18:29 发布

webxuj

最新推荐文章于 2024-09-25 14:18:29 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/webxuj/article/details/126733794

版权

本文深入探讨了Vue组件中的插槽机制，解释了如何使用`:v-slot`或`#`语法来定义和使用插槽，允许父组件定制子组件的内容。同时，文章还介绍了组件自定义事件的实现，包括`v-on`绑定，以及在子组件中通过`this.$emit()`触发自定义事件并在父组件中响应的方法。文中提供了具体的代码示例，包括app组件、Nav子组件和Nav1子组件的事件处理逻辑。

摘要由CSDN通过智能技术生成

插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。
语法：:v-slot:插槽名语法糖:#插槽名

<template>
  <div>
      <box :msg="name" :ae="age"></box>
      <box msg="小红" ae="21"></box>

      <box1 :title="title" :name="name">
        <h4 style="color:red">app组件的插槽</h4>
        11111
      </box1>

      <box2 title="box2的组件">
        <template v-slot:n1>
         <h1>box2</h1>
        </template>
      </box2>
      <box2 title="box2的组件">
        <!-- 语法糖 #号代替 -->
        <template #n1>
         <h1>box266666</h1