新版本的做用域插槽以及舊版本的slot

時間 2019-12-13

標籤新版本插槽以及舊版 slot 简体版

原文原文鏈接

新版本的做用域插槽以及舊版本的slot

1.做用/概念:預先將使用的內容進行保留javascript

個人理解就是父頁面在組件標籤內插入任意內容,子組件內插糟slot控制擺放位置(匿名插槽,具名插槽)vue

案例：java

<body>  
    <div id='app'>
        <Hello>
            <div>
                這裏是插入的內容    //這一部分的內容並不會被輸出（緣由是被組件覆蓋掉了） 
            </div>
        </Hello>
    </div>

    <template id="hello">
        <div>
            <h3>這裏是Hello組件</h3>
        </div>
    </template>
</body>
////////////////////////////////////////////////////////////////////////註冊組件部分
<script>
    Vue.component('Hello', {
        template: '#hello'
    })

    new Vue({
        el: '#app'
    })
</script>

從上面的案例能夠看出直接在組件裏面寫元素是沒有做用的，這時候就須要插槽slotapp

一旦在組件中加入加入的部分就會被顯示出來code

案例：component

<template id="hello">
        <div>
            <slot></slot>
            <h3>這裏是Hello組件</h3>
        </div>
    </template>

具名插槽

<body>
    <div id='app'>
        <Hello>
            <header slot='header'>這裏是頭部</header>    //這部插入的內容會被輸出
            <footer>這裏是底部</footer>      //這一部份內容不會被輸出由於沒有找到對應的插槽
        </Hello>
    </div>
    <template id="hello">
        <div>
            <slot name = "header"></slot>
            <h3>這裏是Hello組件</h3>
            <slot name='footer'></slot>
        </div>
    </template>
</body>
<script>
    Vue.component('Hello', {
        template: '#hello'
    })

    new Vue({
        el: '#app'
    })
</script>

新版本的做用域插槽

做用域插槽: 子組件內數據能夠被父頁面拿到(解決了數據只能從父頁面傳遞給子組件)ip

v-slot (目前該屬性並不完善)作用域

注意: 因爲前兩種插槽的形式在 vue2.6以上會被廢棄，因此要使用v-slot指令來代替it

v-slot的好處：class

將具名插槽和做用域插槽進行統一
要將這兩個屬性帶有vue的標識，而且符合vue兩個最大的特性之一（指令的概念）

因此必須掌握

案例：

<div id="app">
    <Hello>
      <template v-slot:header>
        <h1>Here might be a page title</h1>
      </template>
    
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    
      <template v-slot:footer>
        <p>Here's some contact info</p>
      </template>
    </Hello>
  </div>
  <template id ='hello'>
    <div class="container">
      <header>
        <!-- 咱們但願把頁頭放這裏 -->
        <slot name = "header"></slot>
      </header>
      <main>
        <!-- 咱們但願把主要內容放這裏 -->
      </main>
      <footer>
        <!-- 咱們但願把頁腳放這裏 -->
        <slot name = 'footer'></slot>
      </footer>
    </div>
  </template>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。