question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to define default slot?

See original GitHub issue

Hello, Now I want to define a slot and default slot, but I didn’t find any good way. please help me to resolve this.

💻 Sample code

renderSlot(slots, 'default')

// this is what I want to define the default slot
<Button type="primary" htmlType="submit">登录</Button>

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8

github_iconTop GitHub Comments

1reaction
linkscopecommented, Mar 3, 2021

OK, 我已经解决了该问题,最后使用h函数成功渲染出了后备内容,感谢您的回答

            {renderSlot(slots, 'default', {}, () => [
              h(
                Button,
                {
                  loading: store.state.isLoading,
                  type: 'primary',
                  htmlType: 'submit',
                  shape: 'round',
                  size: 'large'
                },
                '完成'
              )
            ])}
1reaction
nonzzzcommented, Mar 3, 2021

后备内容,Vue官方称其为fallback content,即如果不使用该插槽会默认显示的内容,我现在不清楚如何设置

<slot>如果不使用该插槽,默认展示这里的数据</slot>

好吧,我觉得你想表达的是不是这样?

import { defineComponent } from "vue";

const Component = defineComponent({
  setup(props, { slots }) {
    const safeSlots = !!slots?.default;
    const defaultMessage = () => <span>默认信息</span>;

    return () => <div>{safeSlots ? slots.default() : "你想要的默认信息或者你写个渲染函数放这里"}</div>;
  }
});

@linkscope

Read more comments on GitHub >

github_iconTop Results From Across the Web

Slots - Vue.js
Named Slots​​ A <slot> outlet without name implicitly has the name "default". In a parent component using <BaseLayout> , we need a way...
Read more >
Using Slots In Vue.js - Smashing Magazine
You can also specify default content to go into a slot simply by filling it in: ... If there is one without a...
Read more >
What Is a Slot in Vue.js and How To Use It - Upmostly
Default slots are simply declared by using the slot element on the child component. And in order to pass our HTML, we don't...
Read more >
Using default slot values - Amazon Lex - AWS Documentation
When you use a default value, you specify a source for a slot value to be filled for new intents when no slot...
Read more >
Vue.js 3 Component Slots Tutorial - KoderHQ
To access a named slot, we use the $slot instance variable with the slot's name. If a slot is unnamed, we specify the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found