Vue.component的屬性說(shuō)明
Vue.component的屬性
Vue.component(‘組件名稱’，{})中的屬性
1.template
作用：用來(lái)定義組件的html模板
使用：直接接字符串
Vue.component('組件名稱'，
{
template:'<p>aaa</p>'
})2.data
作用：
定義一個(gè)在組件中使用的數(shù)據(jù)
定義：
Vue.component('組件名稱'，
{
?? ?data:fuction(){
?? ??? ?return(
?? ??? ??? ?msg:'aa'
?? ??? ??? ?//每個(gè)組件使用的數(shù)據(jù)都是獨(dú)立的
?? ??? ??? ?//每個(gè)數(shù)據(jù)都是新創(chuàng)建的
?? ??? ??? ?//就算用的是同一個(gè)組件模板
?? ??? ??? ?//var a=0
?? ??? ??? ?//而直接return a
?? ??? ??? ?//則會(huì)多個(gè)頁(yè)面上的組件同時(shí)使用同一個(gè)數(shù)據(jù)源
?? ??? ?)
?? ?}
})使用：
使用插值表達(dá)式{undefined{msg}}
3.methods
作用：
定義一個(gè)在組件中使用的方法
定義：
Vue.component('組件名稱'，
{
?? ?methods:{
?? ??? ?方法名(){}
?? ?}
})4.props
作用：
將父組件的數(shù)據(jù)傳遞到子組件
定義：
Vue.component('組件名稱'，
{
props:['對(duì)接父組件數(shù)據(jù)的名稱'],
})與data中的區(qū)別：
props是從父組件傳遞過(guò)來(lái)的，只能讀取，不能修改父組件中的值
data是子組件私有的，可讀可寫(xiě)
Vue的component標(biāo)簽
作用
可以在一個(gè)組件上進(jìn)行多樣化渲染。例如：選項(xiàng)卡
is屬性
<div id="father">
<component is="one"></component>
<component is="two"></component>
</div>
<script>
Vue.component('one', {
template: `
<div>我是第一個(gè)組件</div>
`
})
Vue.component('two', {
template: `
<div>我是第二個(gè)組件</div>
`
})
let vm = new Vue({
el: "#father"
})
</script>
可以看到通過(guò)coponent的is屬性可以綁定不同的組件，渲染不同的模板。
那么我們是不是可以通過(guò)這個(gè)屬性來(lái)完成一個(gè)屬性多種模板的效果呢
<div id="app">
<button @click="onclick('hc-c')">顯示第一個(gè)</button>
<button @click="onclick('hc-b')">顯示第二個(gè)</button>
<component :is="name"></component>
</div>
<script>
Vue.component('hc-c', {
template: `
<div>我是第一個(gè)</div>
`
})
Vue.component('hc-b', {
template: `
<div>我是第二個(gè)</div>
`
})
let vm = new Vue({
el: "#app",
data:{
name:''
},
methods:{
onclick(item){
this.name = item;
}
}
})
</script>
可以看到，通過(guò)這個(gè)is屬性，我們可以達(dá)到選項(xiàng)卡的效果
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)傳參的4種方式
本文詳盡的講了在Vue項(xiàng)目中,如何實(shí)現(xiàn)路由跳轉(zhuǎn)傳參的4四種方式（2大路由跳轉(zhuǎn)方式,每種方式包括4種路由傳參實(shí)現(xiàn)形式）,以及每種方式中實(shí)現(xiàn)路由跳轉(zhuǎn)包括路由傳參的方法的各種寫(xiě)法,需要的朋友可以參考下2024-04-04
Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問(wèn)題解決辦法
最近項(xiàng)目更新頻繁,每次一更新客戶都說(shuō)還跟之前的一樣,一查原因是因?yàn)榭蛻魶](méi)有清空瀏覽器的緩存,所以為了方便客戶看到最新版本,開(kāi)始調(diào)研再發(fā)布新版本后自動(dòng)清理緩存,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問(wèn)題的解決辦法,需要的朋友可以參考下2024-02-02
vue2.x中h函數(shù)(createElement)與vue3中的h函數(shù)詳解
h函數(shù)本質(zhì)就是createElement(),h函數(shù)其實(shí)是createVNode的語(yǔ)法糖,返回的就是一個(gè)Js普通對(duì)象,下面這篇文章主要給大家介紹了關(guān)于vue2.x中h函數(shù)(createElement)與vue3中h函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue 出現(xiàn)data-v-xxx的原因及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)的方法示例
這篇文章主要介紹了如何在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)（附Demo）,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了Vue下拉框雙向聯(lián)動(dòng)效果,實(shí)現(xiàn)聯(lián)動(dòng)，大家都知道在vue的頁(yè)面中，想要實(shí)現(xiàn)多個(gè)<el-select 下拉框的值動(dòng)態(tài)改變，必須要調(diào)用@change 函數(shù)，具體操作方法跟隨小編一起學(xué)習(xí)下吧2022-04-04
vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例
今天小編就為大家分享一篇關(guān)于vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)視頻上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Vue3中reactive與ref函數(shù)使用場(chǎng)景
這篇文章主要為大家介紹了Vue3?中有場(chǎng)景是?reactive?能做而?ref?做不了的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn)
這篇文章主要介紹了Vue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03