2. 程式人生 > >Vue slot分發內容

Vue slot分發內容

阿新 • • 發佈：2017-12-18
charset 裏的 插入 tro ron container one str lang

1、概述

slot:混合父組件的內容和子組件的模板。

slot分發的內容，作用域在父組件上。

2、單個slot

子組件使用<slot>，在父組件模板裏，插入子組件標簽裏的內容替換子組件slot標簽以及它的內容。

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
 

        <div id="app">
            <my-component>
                <p>分發的內容</p>
                <p>更多分發的內容</p>
            </my-component>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <
 
script type="text/javascript">
            Vue.component(‘my-component‘, {
                template: `<div>
                <slot>
                <p>如果父組件沒有插入內容,我將作為默認內容出現</p>
                </slot>
                </div>
                `
            });
            
 
new Vue({
                el: "#app"
            })
        </script>
    </body>

</html>

3、具名slot

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <my-component>
                <h2 slot=‘header‘>標題</h2>
                <p>正文內容</p>
                <div slot=‘footer‘>底部信息</div>
            </my-component>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component(‘my-component‘, {
                template: `
                    <div class="container">
                        <div class="header">
                            <slot name="header"></slot>
                        </div>
                        <div class="main">
                            <slot></slot>
                        </div>
                        <div class="footer">
                            <slot name="footer"></slot>
                        </div>
                    </div>
                `
            });
            new Vue({
                el: "#app"
            })
        </script>
    </body>

</html>

Vue slot分發內容

相關推薦

Vue slot分發內容

charset 裏的 插入 tro ron container one str lang 1、概述 slot:混合父組件的內容和子組件的模板。 slot分發的內容，作用域在父組件上。 2、單個slot 子組件使用<slot>，在父組件模板裏，插入子組件標

vue 的slot分發內容 （多個分發）

 元件模板-元素可以用一個特殊的屬性 name 來配置如何分發內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot 特性的元素 <style media="s

使用slot分發內容 作用域插槽

沒有 數據 臨時變量 使用 數據傳遞 one 分發 接受 組件 除非子組件模板包含至少一個<slot>插口，否則父組件的內容將會別丟棄。當子組件模板只有一個沒有屬性的slot時，父組件整個內容片斷將插入到slot所在的DOM位置，並替換掉slot標簽本身。 最初

vue2.0 slot 分發內容

child 需要 例如 html標簽 vue 包括 放置 rst brush 1.概述： 簡單來說，假如父組件需要在子組件內放一些DOM，那麽這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。 2.默認情況下 父組件在子組件內套的內容，是不顯

slot分發內容

slot元素作為元件模板之中的內容分發插槽。這個元素自身將被替換。 有 name 特性的 slot 稱為具名 slot。 有 slot 特性的內容將分發到名字相匹配的具名 slot。 內容分發就是指混合父元件的內容與子元件自己的模板 以下主要使用具名slot 子元件程式碼 <

vue組件-使用插槽分發內容(slot)

child template 一個 可能 組件 好的 使用 pro 默認 slot--使用插槽分發內容（位置、槽口；作用: 占個位置） 官網API： https://cn.vuejs.org/v2/guide/components.html#使用插槽分發內容 使用組件時，有

vue slot插槽及內容分發

單個插槽 父元件 <template> <div id="app"> <hello-world> <!--倘若子元件裡沒有slot,

vue.js-使用插槽分發內容的三個示例

代碼 header bin .text function 錯誤 app slot 總結 　　自己這段時間在自學vue.js，發現關於插槽這方面，官方文檔中，沒有詳細的講解使用方法與示例，我自己試著來總結了一下。然後根據官方文檔寫了幾個使用插槽的例子。每個例子都要引入vue.

深入淺出vue元件之使用slot分發

在實際專案開發當中，時常會把父元件的內容與子元件自己的模板混合起來使用。而這樣的一個過程在Vue中被稱為內容分發。也常常被稱為**slot（插槽）**。今天主要來介紹了vue元件詳解之使用slot分發內容及Vue元件中slot的用法 一、什麼是slot 在使用元件時，我們常常要像這樣組

vue <slot>slot> 插槽用於展現使用模板時候 內部的內容

起因 在vue元件使用的過程中，出現在模板的內部的內容會被預設替換，比如下面的例子 <div id="app4"> <temp1>在模板使用的時候內部寫的內容&

vue slot

bsp child put 謝謝 rom 怎麽辦 log highlight spa 一般我發現slot都是用在子組件 不知道對不對，不對的請留言指教 ，謝謝謝謝 使用slot場景一： 子組件Minput.vue <input type=‘text‘/>

插槽分發內容

div sco -m 標簽 AI option pan oot 允許 為了讓組件可以組合，需要一種方式來混合父組件的內容與子組件自己的模板。這個過程稱為內容分發，使用特殊的<slot>元素作為原始內容的插槽首先需要明確在哪個作用域編譯父組件模板的內容在父組件作用

大白話vue——slot的作用與使用

emp 官方文檔 動手 組件 rip info 記錄 temp 解釋 這篇內容本來是不打算放在首頁上的，因為內容實在是比較簡單，但是在查找slot的使用講解時發現相關的講解比較少，要麽像官方文檔一樣簡單講解（看過任然一臉懵逼），也許是自己理解能力比較差...所以在此講述記錄

vue slot插槽的使用

場景 color header head fff back 不同 傳遞 nbsp slot插槽的使用場景 父組件向子組件傳遞dom時會用到插槽 作用域插槽：當同一個子組件想要在不同的父組件裏展示不同的狀態，可以使用作用域插槽。展示的狀態由父組件來決定 註：想要修改父

新手關於 Vue Slot 的理解

本文出自： http://blog.csdn.net/wyk304443164 看了Vue兩天了，記了不少筆記。基本都是稍微看了下，等專案的時候再搞吧。 下面開始 說實話官網比較難懂，在我一開始看的時候，很懵逼，然後看了這篇 http://

Vue框架主要內容學習總結

Vue框架體系主要內容： 1. vue核心語法和用法； 2. vue-router——路由。路由相當於訪問路徑，將訪問路徑與vue元件對映起來。傳統方式常採用超連結實現路徑或頁面之間的切換， 　而在vue中使用路由的方式實現這一功能，由於是統一處理的方式，更易於管理和維護。 　引入方式如下：

Vue slot（在父元件中控制子元件中的值）

<div id="app"> <button @click="toshow">點選讓子元件顯示</button> <children> <span slot="first">【12345】</span>

Vue slot的用法

之前看官方文件，由於自己理解的偏差，不知道slot是幹嘛的，看到小標題，使用Slot分發內容，就以為 是要往下派發內容。然後就沒有理解插槽的概念。其實說白了，使用slot就是先圈一塊地，將來可能種花種菜，也有可能在這塊地上建房子。然而slot可以以一當十，可以插入很多東西。不知明白否？ 由於專案經驗有限，這篇

vue slot的使用介紹

插槽：slot （不知道我這樣理解是不是對的，歡迎大佬指點） 具體是什麼樣子的，請看例子說明 父元件程式碼 子元件程式碼 結果 可以看到 ，結果是父元件裡面內容顯示了，子元件內容顯示了，但是在父元件中插入子元件的內容是沒有顯示的，這樣寫無效！ 如果想要顯示出來，在子元件裡面新增slot標籤就可以了

vue.js 學習內容總結

div 數據 alert add oca 出錯 -- dto 學習內容 總體架構： // 實例化vue對象（MVVM中的View Model） new Vue({ // vm控制的區塊為id為app的div，此div中的所有vue指令均可以被vm解析