vue slot 这是哪种用法

  • Z时代
  • 2024-02-21
  • 分类：IT

vue slot 这是哪种用法

如题．
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>

回答：

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

补充：前面看错了。

举个栗子吧。子组件通过<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>

以上是 vue slot 这是哪种用法 的全部内容， 来源链接： utcz.com/p/935612.html

回到顶部