Vue.js 組件
1、全局組件生成(所有的Vue實例都可以使用)
語法構(gòu)成:Vue.component(tagName, options)
解讀: 其中tagName為組件名,options為組件的一些配置選項苹威。注冊成功后袁滥,我們可以直接調(diào)用組件厕九。
好處: 通用的組件颈娜,可以自己寫好供其他人使用,避免重復(fù)造輪子凝化,提升開發(fā)效率稍坯。
eg:
組件聲明:
new Vue.component(‘peter’, {
template: ‘<h1>peter自定義組件</h1>’
})
</script>
組件使用
<peter></peter>
疑問? 如何向組件中傳入指定的內(nèi)容呢?
2瞧哟、局部組件(僅當(dāng)前的Vue實例可以使用)
注意局部組件的聲明是在Vue實例中聲明的混巧,故僅對當(dāng)前實例生效。類比成函數(shù)內(nèi)的局部變量勤揩,僅在當(dāng)前函數(shù)內(nèi)可用咧党,一旦超出作用域就不可使用了。
<script>
//組件內(nèi)容定義
var Child = {
template: ‘<h1>peter自定義的組件</h1>’
}
new Vue: ({
el: ‘#app’,
//組件聲明
components: {
‘peter’: Child
}
})
<script>
組件使用:
<peter></peter>