vue Slot插槽的使用

2022-06-28 03:33:08 字數 1029 閱讀 1846

官方文件

先上**

父元件我是父元件

default="user">

}子元件

正文1. 預設插槽適用方式

父元件

我還是預設插槽的內容

子元件

2. 具名插槽

父元件 2.6之前寫法

我還是預設插槽的內容

命名插槽

我是預設插槽

子元件

2.6.0 版本之後    slot slot-scope(子向父傳值)都被廢棄   同意使用v-slot      

父元件

}

3.傳值

向子插槽傳值 就是父子元件傳值·

子向父傳值

slot-scope 已經廢棄的用法

父元件

哇哈哈}

子元件

最新玩法

}

-->

簡寫

簡寫 }

-->

值可以解構 追加

}

-->

重新命名

} -->

追加 } -->

定義預設內容 也就是當子元件插槽沒傳值的時候

v-slot=" }"動態插槽命名

...

預設插槽簡寫

當只有預設插槽  

當前元件上寫

父元件}

子元件簡寫父元件 預設插槽 將引數寫在父元件上 必須帶上default

}

父級模板裡的所有內容都是在父級作用域中編譯的;子模板裡的所有內容都是在子作用域中編譯的。

遇事不懂 官方文件

vue slot插槽的使用

vue官方文件在slot這部分講解的並不是很詳細,這裡用更通俗的語言進行描述。根據官檔的標題來開始吧 假如父元件的 如下 children為註冊的子元件 這裡是插槽的內容,位於子元件內部 渲染結果 這裡是子元件,注意 沒有加入slot標籤哦!上面的 實際效果如下 這裡是父元件 這裡是子元件,注意 沒...

Vue slot 插槽的使用

slot插槽作為分發內容的出口 假設看這篇文章的你已經有了一定的vue元件基礎 let btn vue.component btn template 1 上述 建立了乙個名為btn的全域性元件。接下來我們在其他頁面中呼叫這個外掛程式 let vm new vue template 得到的頁面效果如下...

Vue slot插槽的使用

lang en charset utf 8 插槽title head slot slot1 up value data title up slot slot2 down value book v for book in books down shouhe div src script src scr...