1.語法：vue.component("元件名字",)，**如下：
a. data： 必須是乙個函式，有乙個返回值。和vue裡面的使用方法一樣
b. template: 用來標示這個元件的渲染後的具體的**
<div
id>
<
button-count
>
button-count
>
<
button-count
>
button-count
>
<
button-count
>
button-count
>
div>
<
script
>
vue.component(
"button-count",}
",data:
function
() }
})new
vue(
})script
>
2.元件的屬性是通過props定義的，可以是乙個陣列，直接寫屬性名字。也可以是乙個物件，可以給每個屬性定義約束，比如：type，required，default。元件中只能有乙個根元素。**如下：
<div
id>
<
blog-list
:blogs
="blogs"
>
blog-list
>
div>
<
script
>
vue.component(
"blog-list",
},template:`
<
table
>
<
thead
>
<
tr>
<
th>
序號<
/th>
<
th>
標題<
/th>
<
/tr>
<
/thead>
<
tbody
>
<
tr v
-for="
(blog,index) in blogs
">
<
td>
}<
/td>
<
td>
}<
/td>
<
/tr>
<
/tbody>
<
/table>
` })
newvue(,]}})
script
>
3.自定義元件新增事件：**如下：
a.在需要觸發事件的時候，呼叫this.$emit(事件名稱,引數...)
b.在使用這個元件的時候，繫結事件，語法同html比如：@check-chenged
<div
id>
<
blog-itme
v-for
="blog in blogs"
:blog
=blog
@check-changed
="checkchanged"
>
blog-itme
>
<
h1>選中的是：
h1>
<
div
v-for
="blog in selected_blogs"
>}
div>
div>
<
script
>
vue.component(
"blog-itme",}
<
/span>
<
input type="
checkbox
"@click="
oncheck
">
<
/div>
`, methods:}})
newvue(,],
selected_blogs:
},methods:
else}}
})script
>
4.自定義元件v-model：計步器-->在配置中需要兩個屬性進行配置
a.event:代表什麼情況下觸發這個v-model行為
b.prop：代表傳給v-model的那個變數，要繫結到那個屬性上
c.呼叫this.$emit(model.event,計算後的結果)就可以了，**如下：
<div
id>
<
stepper
v-model
="goods_count"
>
stepper
>
div>
<
script
>
//計步器
vue.component(
"stepper",,
template:`
<
div>
<
button @click="
sub"
>-<
/button>
<
span
>
}<
/span>
<
button @click="
add"
>+<
/button>
<
/div>
`, methods:,
add()}})
newvue(
})script
>
5.自定義元件--插槽
a.插槽的用法是在元件的模板**彙總，在指定的位置使用slot，以後在使用這個元件的時候，在元件中新增的內容都在slot的位置
b.作用區域：插槽中只能使用元件中的資料，只能從父元件中讀取資料
c.預設值，可以填寫乙個預設值，使用的時候可以用預設值，也可以自己寫值 **如下：
<div
id>
<
chacao
url=""
chacao
>
<
div>
<
moren
>哈哈
moren
>
<
moren
>
moren
>
div>
div>
<
script
>
vue.component(
"chacao",)
vue.component(
"moren",)
newvue(
})script
>
6.自定義名稱插槽：如果想要在自定義元件中定義多個插槽，就需要給插槽取個名字。
a.定義：
b.使用：
**如下：
<div
id>
<
container
>
<
template
v-slot:header
>這個是header
template
>
<
template
v-slot:body
>這個是body
template
>
<
template
v-slot:footer
>這個是footer
template
>
container
>
div>
<
script
>
vue.component(
'container',)
newvue(
})script
>
<div
id>
<
container
>
<
template
v-slot:header
="headerprops"
>}
template
>
<
template
v-slot:footer
="footerprops"
>
}/ }
template
>
container
>
div>
<
script
>
vue.component(
"container",
} })
newvue(
})script
>
VUE（四） 自定義元件
自定義元件用於封裝一些可復用的頁面元件，類似於js模版 又或者模版引擎中的巨集。就像簡訊模版 郵件模版，整體的資訊先定義好，用的時候再把資料填充進去即可。所以，學習vue自定義元件包括 通過components進行元件定義，使用template設定 模版，vue分為全域性元件和部分元件，具體看以下案...
Vue 自定義元件
元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同，實現元件的復用，但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料，我們需要通過子元件的 pr...
Vue 自定義元件
元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素，封裝可重用的 在較高層面上，元件是自定義元素，vue.js 的編譯器為它新增特殊功能。在有些情況下，元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...