Question

我正在学习Vue框架，无法理解如何使用slot，请谁给我看示例演示？非常感谢。

Answer 1

作为https://vuejs.org/v2/guide/components-slots.html#Named-Slots

中的快速代码示例

让我们说您要呈现给定的名为“基本布局”的模板

<div class="container">
  <header>
    <!-- We want header content here -->
  </header>
  <main>
    <!-- We want main content here -->
  </main>
  <footer>
    <!-- We want footer content here -->
  </footer>
</div>

所以您可以看到我们有三个插槽：“页眉”，“主”和“页脚”。

如果你写

<base-layout>
  <h1 slot="header">Here might be a page title</h1>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <p slot="footer">Here's some contact info</p>
</base-layout>

然后，第一个h1标签值进入模板中名为“ header”的插槽内。以及其他类似的值。

结果将是

<div class="container">

<!-- this is where the 'header' slot was  -->
<h1>Here might be a page title</h1>

<!-- this is where the main slot was -->
<p>A paragraph for the main content.</p>
<p>And another one.</p>

<!-- this is where the footer slot was -->
<p>Here's some contact info</p>

因此，插槽基本上就像占位符一样，可以命名，您可以在确切的位置发送信息。

Answer 2

@Doc感谢您的回答和提示。我制作了演示：

    <!DOCTYPE html>
<html>

<head>
    <title>39、slot !</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <alert-box>
            Something bad happened.
        </alert-box>
    </div>
    <script>
        Vue.component('alert-box', {
            template: `
                <div class="demo-alert-box">
                    <strong>Error!</strong>
                    <slot></slot>
                </div>
            `
        })
        var app = new Vue({
            el:'#app'
        })
    </script>
</body>

</html>

如何使用<slot>，谁可以给我一个示例演示？

2 个答案: