как использовать <slot>, кто может дать мне пример демонстрации? - PullRequest
Новая
       0

как использовать <slot>, кто может дать мне пример демонстрации?

0 голосов
/ 24 декабря 2018

Я изучаю фреймворк Vue, не могу понять, как использовать slot , кто может показать мне пример демонстрации, пожалуйста?Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 24 декабря 2018

@ Док спасибо за ответ и подсказку.И я разглядываю демо: 

    <!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>
0 голосов
/ 24 декабря 2018

В качестве быстрого примера кода из https://vuejs.org/v2/guide/components-slots.html#Named-Slots

Допустим, вы хотите сделать данный шаблон с именем 'base-layout' 

<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>

Итак, вы можете видеть, что у нас есть три слота'header', 'main' и 'footer'.

Если вы напишите 

<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>

Таким образом, слоты в основном похожи на заполнители, которые могут быть названы, и вы можете отправлять информацию точночасть.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...