Vue元件通訊 插槽 ElementUI

2021-10-05 05:38:19 字數 1101 閱讀 9045

父傳子

父元件傳遞資料給子元件

子傳父

子元件中的資料傳回給父元件

元件之間的傳遞

元件與元件之間可以任意傳遞

父元件與子元件

在當前元件(父元件)中引入另乙個元件(子元件)並且進行宣告和使用,就叫父子關係

預設插槽

如果沒有傳資料進去,則以預設值為準

具名插槽

①在父元件中使用子元件時,子元件標籤對中間可以寫其它標籤,並且用 slot屬性命名

②在子元件中,可以使用,使用對應的具名插槽

作用域插槽

①在子元件中設定作用域資料

②在父元件中使用slot-scope接收到資料,並使用

v-slot指令

作用

簡化作用域插槽的寫法

"scope"

>

我來組成身體,姓名:

},年齡:

}歲<

/h3>

<

/template>

<

/hello>

安裝element-ui

npm i element-ui

配置和註冊

①在main.js中引入element-ui

import elementui from 『element-ui』;

②引入全域性樣式

import 『element-ui/lib/theme-chalk/index.css』;

③註冊全域性元件

vue.use(elementui);

使用elementui

開啟官方**,找到元件,複製**貼上到頁面上

Vue元件插槽

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

vue的元件化開發(元件通訊,插槽,遞迴元件)

1.vue元件的通訊 包括子通父,父通子,兄弟通訊,祖代與後代通訊,vuex全域性狀態管理。1.1 父向子通訊 props屬性和refs屬性。1.1.1 props屬性 在子元件中 props age1 number,string 存在多種型別。在父元件中 1.1.2 refs屬性 通過this.r...

vue 元件插槽詳述

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