Vue中插槽的使用

1. 兩個元件

元件b

:/h1>
<
/div>
<
/template>
export
default
<
/script>
<
/style>
元件a:
<
/testb>
<
/div>
<
/template>
import testb from
'../components/testb'
export
default
}<
/script>
<
/style>現在元件a的效果：
2、現在修改元件a和元件b的內容
我是a元件的內容，我叫小a
3、看看發生了什麼變化
「我是a元件的內容，我叫小a」這段內容被分發到了元件b的容器，其實這就是插槽。現在再來看看官方的解釋：vue 實現了一套內容分發的 api，這套 api 的設計靈感源自 web components 規範草案，將 元素作為承載分發內容的出口。
2、後備內容
後備內容很簡單，但很有用
b元件改造：
小b<
/slot>
<
/div>
<
/template>
a元件：
小a<
/testb>
<
/div>
<
/template>3、具名插槽
自 2.6.0 起有所更新

改造元件b:"header"

>
<
/slot>
<
/header>
<
/slot>
<
/main>
"footer"
>
<
/slot>
<
/footer>
<
/div>
<
/template>相應的元件a：

<

/template>

我是內容

<

/template>

<

!--任何沒有被包裹在帶有 v-slot 的 中的內容都會被視為預設插槽的內容。或者可以給他起名default

-->

<

!--我是內容--

>

我是尾部

<

/template>

<

/testb>

<

/div>

<

/template>具名插槽就是有名字的插槽，當有多個插槽時以作區分。

跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，即把引數之前的所有內容 (v-slot:) 替換為字元 #。例如 v-slot:header 可以被重寫為 #header：，前提是必須要有插槽名！！！

注意 v-slot 只能新增在 < template > 上，只有當被提供的內容只有預設插槽時，元件的標籤才可以被當作插槽的模板來使用。這樣我們就可以把 v-slot 直接用在元件

目的：讓插槽內容能夠訪問引用的元件中才有的資料

"user"

>
}<
/slot>
<
/div>
<
/template>
export
default}}
}<
/script>元件b繫結了乙個自身的user屬性，並將user.lastname當作後備內容
元件a:

!--當被提供的內容只有預設插槽時，元件的標籤才可以被當作插槽的模板來使用。這樣我們就可以把 v-slot 直接用在元件上,但是不能和具名插槽混用--

>

"slotprops"

>

}<

/testb>

<

/div>

<

/template>

繫結在 < slot > 元素上的特性被稱為插槽 prop，即slotprops,這個名字可以隨便起，現在展示的內容便是元件b中的user.firstname的了

Vue中插槽的使用。

寫在前面 vue中插槽的使用讓元件變得更加靈活。使得封裝乙個元件的復用性和api的暴露更加靈活多變。當元件當做標籤使用的時候，在標籤裡面的元素不會顯示，這個時候就需要用到插槽。一 最基本的使用 當元件當做標籤使用的時候，在元件標籤內部的標籤往往不顯示，這個時候就需要用到插槽。寫在元件標籤內部的標籤需...

Vue中插槽的使用

vue插槽常用的分為三種 預設插槽 具名插槽和作用域插槽。1 預設插槽 child.vue slot div template father.vue 預設插槽 child div template import child from child.vue export default script 這...

vue中的插槽的使用

匿名插槽就是可以在父元件中的子元件的標籤中直接新增內容 子元件a 我是a元件中的對話方塊 父元件 在元件外,我們可以往插槽裡填入任何元素,dialog a為元件的名稱 只有子元件中使用了slot才能成功在此標籤中新增內容 按鈕 可以是任何元素 具名插槽就是乙個擁有name屬性的插槽，具名插槽可以在同...