vue自定義元件

2022-07-02 06:33:16 字數 709 閱讀 7587

元件:簡言之就是將一些共性的內容做乙個封裝,方便以後重複使用。

在vue中元件包括:全域性元件和區域性元件。元件都具有復用性,自定義的元件擁有vue的全部特性,包括生命週期、template、data、methods、script、style等。

元件的命名:

(1)元件名稱官方規定使用小寫字母且用『-』連線

(2)元件可以使用駝峰命名法,但是在使用時必須大寫轉小寫,且用『-』連線,因為html不識別大小寫,全部會被認為小寫。

通過乙個物件的方式直接定義,在vue例項中註冊後使用

物件中包含乙個template屬性,表示元件使用的模板html。另外在元件中定義的data必須是乙個function,需要乙個物件定義的返回值

引數一:表示元件id

引數二:表示元件的配置資訊

全域性組建定義完成後,可以直接使用

134

5

另一種寫法

在模板中,有且只有乙個根節點用來包裹所有的節點

父元件向子元件傳值通過props

var h=}

結論:(1)使用props可以實現父子元件之間的傳值(2)使用this.$emit()可以實現子元件呼叫父元件的方法達到傳值的效果

Vue 自定義元件

元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 pr...

Vue 自定義元件

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素,封裝可重用的 在較高層面上,元件是自定義元素,vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...

vue 元件自定義

基於iview的自定義table元件 一 業務要求 1.展示列表字段資訊.2.列表資料的增刪查改 與 匯出 3.列表的分頁功能 二 元件 實現 html ref table data arrlist columns currcolumns loading loading no data text 暫...