Vue元件化高階 slot插槽

2021-10-24 22:01:03 字數 1473 閱讀 8268

元件的插槽:

如何封裝合適?抽取共性,保留不同

插槽的基本使用:在template內部定義標籤

插槽的預設值:預設值

如果在父模板中,有多個值同時放入到元件中進行替換,將會一起作為替換元素

>

哈哈哈<

/span>

<

/cpn>

// 用span替換template中slot插槽裡內容

hehehe<

/i>

<

/cpn>

<

/cpn>

<

/div>

"cpn"

>

我是標題<

/h1>

按鈕<

/button>

<

/slot>

// 插槽,預設值為乙個button標籤

<

/div>

<

/template>

<

!-- 開發環境版本,包含了有幫助的命令列警告 --

>

"">

<

/script>

//(父元件)

newvue(,

components:}}

)<

/script>

針對於template中含有多個slot的情況

>

"center"

>標題<

/span>

//通過slot="name"的方式,來決定替換哪個插槽

"left"

>返回<

/button>

<

/cpn>

<

/div>

"cpn"

>

"left"

>

左邊<

/span>

<

/slot>

// 為slot標籤新增name,來區別

"center"

>

中間<

/span>

<

/slot>

"right"

>

右邊<

/span>

<

/slot>

<

/div>

<

/template>

<

!-- 開發環境版本,包含了有幫助的命令列警告 --

>

"">

<

/script>

//(父元件)

newvue(,

components:}}

)<

/script>

vue父子元件slot插槽

關於父元件在使用子元件的時候,向子元件插入內容的方法 1 建立乙個子元件,並在vue例項中註冊 這是建立子元件 var testzujian 這是註冊子元件 let vm new vue 2 在html 中使用子元件 root testzujian div body 3 在vue例項中寫入想要插入到...

vue元件 使用插槽分發內容 slot

官網api 使用插槽分發內容 使用元件時,有時子元件不知道會收到什麼內容,這是由父元件決定的。1.my component 元件 div h2 我是子元件的標題 h2 只有在沒有要分發的內容時才會顯示。div 2.父元件 div h1 我是父元件的標題 h1 這是一些初始內容 這是更多的初始內容 d...

Vue學習筆記 元件的插槽slot

插槽slot 子元件中加入標籤,父元件呼叫子元件時,雙標籤的內容,就會複製到slot中 template 插槽slot 插槽中使用子元件 父元件使用slot時,可以使用其他子元件 插槽中使用資料項 父元件使用slot時,可以使用資料項 動態資料 父元件模板裡呼叫的資料屬性,使用的都是父元件裡的資料 ...