vue slot 这是哪种用法

发布于 2022-09-13 00:24:30 字数 786 浏览 11 评论 0

如题.
1.默认插槽
2.具名插槽
3.作用域插槽
下面是哪种用法?

1.editCard组件:(el-dialog组件里貌似没有声明插槽levelCode)

<configMyself :config="config">
<div slot="levelCode">  // 插槽
    <el-tooltip effect="dark" :disabled="true" :content="addrName" placement="top">
    <el-input />
    </el-tooltip>
</div>
</configMyself>

config配置:
data() {
 config: [
 { type: 'custom', key: 'levelCode', slot: 'levelCode', props: { label: '名称', required: true, validator: { text: '不能为空', reg: 'required' }, data: { options: [] }}}
 ]
}

2.dialog引用:

<el-dialog>
  <editCard
       v-if="add"
       :key="Key"
       :params="Params"
       @change="change"
    />
</el-dialog>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

腹黑女流氓 2022-09-20 00:24:30

这属于“没有插槽”。
你只声明了有插槽,但是没有用。


补充:前面看错了。

举个栗子吧。子组件通过<slot />声明了 2 个插槽,有name属性的就是具名插槽,没有的就是默认插槽。父组件通过v-slot:指定具名插槽的名字,不知道的就是默认插槽。注意v-slot:content等价于slot="content",后者是废弃的旧语法。

// Child组件
<div>
  我是Child
  <div>
    <slot />
    <slot name="content" />
  </div>
</div>

// Parent组件
<div>
  我是Parent
  <Child>
    <div>插入到child的默认插槽</div>
    <div v-slot:content>插入到child的content插槽中</div>
  </Child>
</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文