Vue 元件的插槽

2022-05-17 04:16:22 字數 1802 閱讀 2330

元件的插槽:

**示例:

p>總消費量:}

p>

<

tan

v-bind:name

="name"

v-on:tank

='add'

>

// 可以為插槽起名

<

span

slot

="haha"

>哈哈哈!

span

>

<

span

slot

='heihei'

>嘿嘿嘿!

span

>

tan>

// 第二種替換方式

<

tan

v-bind:name

="name"

v-on:tank

='add'

>

// 可以為插槽起名

<

template slot='haha'>

哈哈哈!

嘿嘿嘿!

tan>

div>

<

script

>

//這裡注意一定要用div將template中的標籤抱起來

const tancomponent=}}

<

/button>

<

slot name='

haha

'><

/slot>

<

slot name='

heihei

'><

/slot>

<

/div>

`, data:

function

() },

props:,

methods:,}}

varvm

=new

vue(,

components:,

methods:}})

script

>

body

>

html

>

Vue元件插槽

三 具名插槽 命名插槽 補充當我們使用vue元件時,常常遇到子元件的部分布局在不同的路由元件上表現不同的情況,vue為了幫助我們開發者解決這個問題,新增了插槽這個功能 插槽即佔位符 實現元件在不同父元件中使用,內部可以有不一樣 塊 html 如下 示例 如下 示例 當乙個子元件內,需要多個插槽時,需...

vue 元件插槽詳述

在使用元件時,在引用的元件標籤中新增內容時,會自動被元件中的模板代替,如 例1 例1 vue.component my comp 結果 當不想要傳遞給元件的內容被替代,則可以使用元件插槽來解決這個問題,具體使用方法是,在元件模板中新增 標籤,當元件渲染時,將會被替換為 寫在元件標籤結構中的內容 如 ...

vue元件開發之元件插槽

作用 父元件向子元件傳遞內容 插槽位置 vue.component alert box 具名插槽定義 就是有名字的插槽 定義name header slot 內容solt header 內容h1 沒有名稱的話就匹配到沒有name屬性的插槽中 還可以使用template標籤進行使用 template只...