slot與v slot指令和ref

2021-10-09 08:12:11 字數 1699 閱讀 6090

(1)slot簡單的使用:

概念:在元件標籤內部寫入的內容預設的會被替換掉,如果想要在元件的模板裡使用這些內容,就在對應的位置寫上slot標籤,這個slot標籤就代表著這些內容

>

"yidong"

>移動卡<

/p>

"liantong"

>聯通卡<

/p>

<

/hello>

<

/hello>

"yidong"

>移動卡<

/p>

<

/hello>

<

/div>

"hello"

>

"yidong"

>

<

/slot>

我是hello

"liantong"

>

<

/slot>

<

/div>

<

/template>

(2)v-slot:

v-slot必須和template標籤使用否則無效、使用v-slot:p1="info"時v-slot:p1就等同於slot="p1"和slot標籤相聯絡

v-slot渲染的頁面就可以使用相應元件的資料通過}呼叫

在使用元件資料時需要在元件slot標籤中用屬性獲取才可以

盡量不要使用slot標籤作為元件中的根元素

在呼叫元件時可以使用資料型別相對的簡單的方法

注:vue版本2.6+才可以使用v-slot

>

"info"

>我是乙個slot標籤 --}--

}<

/template>

<

/hello>

"info"

>我是乙個slot標籤 --

}<

/template>

<

/hello>

<

/div>

"hello"

>

"p1"

:msg=

"msg"

:arr=

"arr"

>

<

/slot>

<

/div>

<

/template>

<

/body>

支援v-slot指令 可以實現作用域槽口

vue.

component

("hello",}

})newvue

()

(3)ref的用法:

父元件可以主動哦給子元件新增ref標記也可以給dom做標記,可形成ref鏈,就可以進行互動

"aaa"

>

"btn" @click=

"get"

>

get<

/button>

"b">

<

/bbb>

<

/div>

<

/template>

"bbb"

>

"text" v-model=

"msg"

>

<

/div>

<

/template>

動態元件與slot插槽

切換 button component div vue.component a vue.component b newvue methods mount 上述切換涉及到兩個元件的建立和銷毀,對記憶體會有損耗,如果能將元件快取起來,就可以解決這個問題 切換 button include compone...

訊號 SIGNAL 與槽 SLOT

我們可以借助connect函式進行初步了解 qmetaobject connection qobject connect const qobject sender,訊號的發出者 const char signal,觸發的訊號 const qobject receiver,訊號的接收者 const c...

Vue中slot的介紹與使用

父元件 我是父元件 color red 我是父元件插槽內容 在父元件引用的子元件中寫入想要顯示的內容 可以使用標籤,也可以不用 子元件 slotone1 class slotone1 我是slotone1元件 在子元件中寫入slot,slot所在的位置就是父元件要顯示的內容 父元件 我是父元件 co...