vue自定義元件,插槽,自定義事件

2021-10-09 17:02:58 字數 3627 閱讀 7154

vue.

component

('自定義元件名',}

'// 自定義模板 裡面套html標籤, 可以取屬性的值

})

vue.

component

('lover',)

;new

vue(})

;<

/script>

>

>

lover

>

div>

/* 自定義元件模板 bitqian標籤 */

vue.

component

("bitqian",}'

});new

vue(})

;<

/script>

v-for

="item in items"

v-bind:language

="item"

v-bind:key

="item.index"

>

bitqian

>

lang

="en"

>

>

charset

="utf-8"

>

>

vue 元件繫結值title

>

src=

"../js/vue.js"

>

script

>

head

>

>

>

>

lover

>

/>

v-for

="item in items"

v-bind:language

="item"

v-bind:key

="item.index"

>

bitqian

>

div>

>

vue.

component

('lover',)

;/* 自定義元件模板 bitqian標籤 */

vue.

component

("bitqian",}'

});new

vue(})

;script

>

body

>

html

>

lang

="en"

>

>

charset

="utf-8"

>

>

slot插槽 結合vue元件 實現模板化title

>

src=

"../js/vue.js"

>

script

>

head

>

>

>

v-for

="item in items"

v-bind:language

="item"

>

my-component

>

div>

>

>

slot

="demo-title"

v-bind:title

="title"

>

demo-title

>

slot

="demo-item"

v-for

="(item, index) in items"

:item

="item"

v-bind:index

="index"

>

demo-item

>

demo-component

>

div>

>

// vue元件複習

vue.

component

('my-component',}'

})newvue(}

)/* slot 插槽定義 元件通過插槽套元件 */

vue.

component

('demo-component',)

// 標題元件

vue.

component

('demo-title',}

'})// 標題下面對應的每一項

vue.

component

('demo-item'

,}**********} '})

// vue例項 給元件提供資料

let vm =

newvue(}

)script

>

body

>

html

>

lang

="en"

>

>

charset

="utf-8"

>

>

vue 插槽複習title

>

src=

"../js/vue.js"

>

script

>

head

>

>

>

>

slot

="my-title"

v-bind:title

="title"

>

my-title

>

slot

="my-content"

v-for

="(item, index) in items"

:content

="item"

:index

="index"

:key

="index"

v-on:remove

="removeitems(index)"

>

my-content

>

my-component

>

div>

>

vue.

component

('my-component',)

vue.

component

('my-title',}

'}) vue.

component

('my-content'

,} ***** } 移除',

//繫結了remove

methods:}}

)let vm =

newvue(,

methods:}}

);script

>

body

>

html

>

flex自定義元件和自定義事件

看了乙個帖子,自己寫了一下。主要講了自定義元件跟自定義事件。先看一下自定義事件。就跟在殿堂之路中寫道一樣。如生活,理解 就如理解生活一樣一樣的。什麼是事件,事件是怎麼運作的呢?我是這樣理解的 比如去了一家餐館就餐,首先要制定服務員 我要求穿白裙子的那個美女為我服務 端茶倒水,上菜 所以我落座後,說的...

Vue元件中自定義事件

當我們需要在操作元件後引起元件之外的元素發生變化時,就需要是這裡的內容。比如 當選中書後,自動顯示您選中的書名。其中書籍列表是使用元件寫的。顯示選中書籍名是在元件之外。在新增事件的時候需要注意一下事項 1 在定義元件時 vue.component 元件名,在子元件中正常呼叫該事件,但是在需要與父元件...

Vue 自定義元件

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