Vue元件知識點

定義vue元件

全域性元件定義的三種方式

第一種方式：

1.先呼叫 vue.extend() 得到元件的建構函式：

// 建立全域性元件的第一種方式：   component

const com1 = vue.
extend
()

// 使用 vue.component 向全域性註冊乙個元件

// vue.component('元件的名稱', 元件的建構函式)
vue.
component
('mycom1'
, com1)

<

!--如何引入乙個全域性的vue元件呢？直接把元件的名稱，以標籤的形式，放到頁面上就好了！--
>
<
/mycom1>

1.直接使用 vue.component(『元件名稱』, )

const com2obj =

// 定義全域性的元件
// vue.component 的第二個引數，既接收 乙個 元件的建構函式， 同時，也接受 乙個物件
vue.
component
('mycom2'
, com2obj)

1.先使用 template 標籤定義乙個模板的**解構：

<

!-- 定義乙個 template 標籤元素 --
>
<
!-- 使用 vue 提供的 template 標籤，可以定義元件的ui模板解構 --
>
"tmpl"
>
哈哈，這是在外界定義的元件ui解構<
/h3>
我是來搗亂的<
/h3>
<
/div>
<
/template>

// 這是定義的全域性元件

vue.
component
('mycom3'
,)

vue.

component
('mycom',}
, methods:}}
)

如果返回的不是乙個物件，那麼做計數器案例時所有的元件都會增加

官方解釋：

元件會被用來建立多個例項，如果data是個純粹的物件，那麼所以例項將會引用同乙個資料物件。所以每個元件都返回了乙個新的初始變數，這樣元件間不會互相干擾。

父元件向子元件傳值

父元件向子元件傳遞普通資料

傳遞資料使用v-bind(：), 傳遞的資料需要使用props註冊才能使用

1.把要傳遞給子元件的資料，作為 自定義屬性，通過 v-bind: 繫結到子元件身上：

"parentmsg"

>
<
/com1>

props:

['msg123'
]

父元件向子元件傳遞方法

1.把要傳遞給子元件的方法，作為 自定義屬性，通過 v-on: 繫結到子元件身上：

"show"

>
<
/com1>

components:},

methods:}}
}

傳遞資料使用v-bind(：), 傳遞的資料需要使用props註冊才能使用

傳遞方法使用v-on(@),傳遞的方法需要使用$emit來喚醒觸發方法

無論是傳遞資料還是方法,都是需要使用v-bind或者v-on 賦值乙個變數供子元件呼叫,然後變數指向父元件中的屬性或者方法

在vue元件中data和props的區別

data 在元件中，要被定義成function並返回乙個物件

props在元件中，要被定義成陣列，其中，陣列的值都是字串名，表示父元件傳遞過來的資料；

props的資料，不要直接拿來修改，如果想要修改，必須在 data 上重新定義乙個 屬性，然後把屬性的值 從 this.props 拿過來；

data 上的資料，都是元件自己私有的， data 上的資料，都是可讀可寫的

props 資料，都是外界傳遞過來的資料，props中的資料只能讀取，不能重新寫入

三 vue元件相關知識點

1 父vue中component 即子vue 引入 2 從父vue中向component 即子vue 內傳值 3 在父vue中呼叫子vue中的方法 父vue的html中 將ids繫結在子元件 的string上 父js 子vue中 這個結構看著有點亂，其實裡面包含了三個知識點 1 父vue中compo...

Vue中元件相關知識點

一 元件知識點 1.定義 何為元件，簡單來說，元件就是一組html標籤的集合，有點類似於模組，不過模組是基於不同的業務邏輯來劃分的，而元件則是基於頁面不同區域來劃分的。元件中允許有多個標籤，但只允許乙個根標籤。元件的產生同樣也增強了 的復用性。2.建立方式 建立元件例項可以有多種方式，這裡主要講解其...

Vue 元件傳參知識點

很多時候用 emit攜帶引數傳出事件，並且又需要在父元件中使用自定義引數時，這時我們就無法接受到子元件傳出的引數了。找到了兩種方法可以同時新增自定義引數的方法。子元件傳出單個引數時 子元件傳參 this emit test this param 父元件接收 test test event,userd...