uni app中元件的使用

2022-05-19 16:32:48 字數 1039 閱讀 9924

元件基本知識點：

自定義可復用的元件，其結構與單頁面元件類似，通常在需要的頁面引入或者註冊到全域性main.js中使用，這是子元件。

1、props  (props用於父元件給子元件傳遞引數，引數可以限制型別，可以設定預設值)

2、$emit(事件名，引數1，引數n)：用於向父元件傳遞事件，可攜帶子元件的引數

3、ref 用於獲取某個dom節點或子元件的註冊引用資訊，在父元件的$refs物件裡，分別指向dom元素或子元件的例項

4、如需在基本元件的內建事件傳遞新的引數，可使用$event佔位預設引數，如 @change($event,新的引數)

5、插槽，裡面可填充任何模板

如下**為乙個彈窗元件：

}


}				確定
用法：main.js中註冊全域性元件使用：

import popwindow from 'components/uni-part/pop-window.vue'vue.component('popwindow',popwindow);
頁面中呼叫：

<


popwindow 


:showpop


="showpop"


title


="審核意見"


holder


="請輸入您的審核意見"


@close


="changepop"


@click


="confirmfun"


:swarr


="arr"


@change


="changesw"


>


popwindow


>



data() ]}}


methods: ,


confirmfun(e),


changepop()


}
效果如下：

uni app中view元件使用

view是檢視容器。它類似於傳統html中的div，用於包裹各種元素內容。屬性名型別 預設值說明 hover class string none 指定按下去的樣式類。當 hover class none 時，沒有點選態效果 hover stop propagation boolean false 指...

uni app中元件傳值

一 父元件向子元件傳值 通過props來實現，子元件通過props來接收父元件傳過來的值！1 邏輯梳理 第一步 引入子元件 import sonshow from component son.vue 第二步 在components中對子元件進行註冊 components 第三步 以標籤的形式載入 通...

uni app封裝元件以及元件的使用方法

第二步 在子元件中寫入自己想要封裝的 tabbars tab的標題內容 tabindex標題內容的索引值 scrollstyle父級樣式設定 scrollitemstyle每乙個tab內容樣式設定 第三步 父元件頁面引入需要使用的子元件import pagetab from components p...