Vue 002 元件的使用

2021-09-25 02:27:23 字數 994 閱讀 3645

定義乙個全域性的元件的方法：

vue.component("submission-component",)
const submissioncomponent=


new vue()


//單行建立元件


const submissioncomponent = 


//多行建立元件


const submissioncomponent =
1. template只能有乙個根節點。

2. 通過props向元件傳遞資料。

3. 元件內部可以使用方法處理事件。

const submissioncomponent = }


#}}                            


submitted by:


}


`};
將元件註冊到vue：

new vue(


});
使用元件：

= 20 }">
props的資料是只能從父級向子級傳遞資料的。

在父級，可以使用v-bind動態繫結資料。

= 20 }">
在元件中，需要宣告這些資料：

const submissioncomponent = ;
將事件移入元件內部：

const submissioncomponent = }};
外部的**：

new vue(,


computed: );}},


components: 


});

VUE 元件（二）元件通訊

元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時，就要用到自定義事件 子元件用 emit 來觸發事件，父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果，在改變元件data中的count後，通過 emit 將值傳給父元件，父元件用v o...

Vue入門（2）元件

元件是可復用的 vue 例項，且帶有乙個名字。元件是vue.js最強大的功能之一。元件可以擴充套件html元素，封裝可重用的 在較高層面上，元件是自定義的元素，vue.js的編譯器為它新增特殊功能。在有些情況下，元件也可以是原生html元素的形式，以is特性擴充套件。1.區域性元件的建立 div 區...

Vue入門3 元件

1 區域性元件 元件的定義模式可以直接在程式裡面採用html字串的方式進行定義，先進行乙個區域性元件的定義，所謂區域性元件指的是針對於某個vue物件定義的。js el msgdiv components html 執行結果 2 全域性元件 以上所定義的元件只能夠在當前vue物件使用，所以按照習慣性的...