Vue作用域插槽以及替換方式

2021-10-24 22:07:20 字數 741 閱讀 4144

父元件模板的所有東西都會在父級作用域內編譯,子元件模板的所有東西都會在子級作用域內編譯

父元件替換插槽的標籤,但是內容是由子元件來提供

>

<

/cpn>

//下面**的目的是獲取子元件中的planguages

"slot"

>

// slot-scope=" "為固定寫法,template將用來接收abc中值

}<

/span>

<

/template>

<

/cpn>

<

/div>

"cpn"

>

"planguages"

>

// abc為自定義名字

for=

"item in planguages"

>

}<

/li>

<

/ul>

<

/slot>

<

/div>

<

/template>

<

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

>

"">

<

/script>

//(父元件)

newvue(,

components:}}

}})<

/script>

Vue作用域插槽

root 父元件呼叫子元件的時候,給子元件傳了乙個插槽 這個插槽叫作用域插槽 作用域插槽必須以 template開頭和結尾 同時這個插槽要宣告 你要從子元件接收的資料都放在哪 這裡是放在props裡面了 還要告訴子元件模板的資訊 即接收的props怎麼展示資料 props tony h4 templ...

Vue作用域插槽

doctype html en utf 8 編譯作用域 title script head isshow cpn div cpn 我是子元件 h2 我是子元件的內容 p isshow 按鈕 button div template newvue components script body html ...

vue 作用域插槽

先看下 就會明白 父元件 import temp from components temp export default data 子元件 template export default 效果 插槽,也就是slot,是元件的一塊html模板,這塊模板顯示不現實 以及怎樣顯示由父元件來決定。插槽模板是...