Vue作用域插槽

2021-10-03 06:41:46 字數 1481 閱讀 1658

<

!doctype html>

"en"

>

"utf-8"

>

編譯作用域<

/title>

"">

<

/script>

<

/head>

>

"isshow"

>

<

/cpn>

<

/div>

"cpn"

>

我是子元件<

/h2>

我是子元件的內容!

<

/p>

"isshow"

>按鈕<

/button>

<

/div>

<

/template>

newvue(,

components:}}

}})<

/script>

<

/body>

<

/html>

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

作用域插槽是slot乙個比較難理解的點,而且官方文件解釋的不是太清楚

個人的理解是:

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

<

!doctype html>

"en"

>

"utf-8"

>

編譯作用域<

/title>

"">

<

/script>

<

/head>

>

<

/cpn>

"slot"

>

for=

"item in slot.data"

>}-

<

/span>

<

/template>

<

/cpn>

<

/div>

"cpn"

>

"planguages"

>

for=

"item in planguages"

>

}<

/li>

<

/ul>

<

/slot>

<

/div>

<

/template>

newvue(,

components:}}

}})<

/script>

<

/body>

<

/html>

流程:子元件中的資料展示,不是父元件想要的,父元件想辦法拿到子元件資料按照自己格式展示的過程.

Vue作用域插槽

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

vue 作用域插槽

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

vue作用域插槽

首先,在 2.6.0 中,我們為具名插槽和作用域插槽引入了乙個新的統一的語法 即v slot指令 它取代了slot和slot scope這兩個目前已被廢棄但未被移除且仍在文件中的 attribute。匿名插槽,具名插槽都好理解,作用域插槽看了文件,感覺還是有點暈,記錄下。大概就是使用作用域插槽,父元...