元件的插槽:
**示例:
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只...