Vue中的組件詳談
一、組件的注冊(cè)
組件注冊(cè)需要注意的有五點(diǎn)：
1、data要寫(xiě)成函數(shù)，并且用return返回一個(gè)值，這樣不同的調(diào)用才能互不影響
2、template后面跟的是飄號(hào)，就是Tab上面那個(gè)鍵
3、template后面的內(nèi)容要寫(xiě)在一個(gè)大的div里面，不要分開(kāi)多個(gè)div
4、props后面的是數(shù)組，因?yàn)橛泻芏鄠€(gè)prop
5、要保存成js文件
Vue.component("myson",{
data(){
return{
sonmsg:"hello son"
}
},
template:`
<div>
<p>子組件內(nèi)容</p>
prop接收到的值：{{sonprop}}
</div>
`,
props:["sonprop"],
methods:{
sonclick(){
this.$emit("sonemit",this.sonmsg)
}
}
})
二、組件的使用
使用時(shí)只要注意一點(diǎn)就好，要先引用vue，再引用子組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="00-組件-子.js"></script>
</head>
<body>
<div id="app">
<myson></myson>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
parentmsg:"parentmsg to sonprop"
}
})
</script>
</body>
</html>
三、父?jìng)髯?/h2>
父?jìng)髯颖容^簡(jiǎn)單，分成兩步
1、在組件里定義prop
props:["sonprop"]
2、使用組件時(shí)，用定義的prop綁定父的值
<myson :sonprop="parentmsg"></myson>
父里面的值是這樣的
data:{
parentmsg:"parentmsg to sonprop"
}
詳細(xì)傳遞過(guò)程是這樣的，看起來(lái)比較復(fù)雜，其實(shí)就上面說(shuō)的兩步
四、子傳父
子組件給父?jìng)鲾?shù)值要通過(guò)方法來(lái)傳遞，父和子各定義一個(gè)方法，然后用一個(gè)中間方法來(lái)連接，記住這個(gè)中間方法的使用就行了，步驟詳細(xì)分解開(kāi)挺多的
1、在子組件的template的button里使用一個(gè)點(diǎn)擊事件
<button @click="sonclick">按鈕</button>
2、在子組件里定義上面使用的方法，觸發(fā)一個(gè)中間方法并傳遞數(shù)據(jù)
sonclick(){
this.$emit("sonemit",this.sonmsg)
}
3、父使用子組件時(shí)，用中間方法綁定自己的方法
<myson @sonemit="parentclick"></myson>
4、在父的方法里接收數(shù)據(jù)，這里p可以寫(xiě)成任意字符
parentclick(p){
vm.parentmsg=p;
}
詳細(xì)代碼圖
運(yùn)行效果
五、插槽
1、加入插槽，插槽就是在組件里留一個(gè)空位，使用組件時(shí)可以插入任意東西
在子組件某個(gè)位置定義：<slot></slot>
使用組件時(shí)就可以在該位置添加任意標(biāo)簽
2、加入多個(gè)插槽時(shí)，要為每個(gè)插槽命名，使用時(shí)每個(gè)slot要放在一個(gè)template里面
定義多個(gè)插槽
template:`
<div>
<p>子組件內(nèi)容:{{sonmsg}}</p>
<p>分隔線111111111111111</p>
<slot name="a1"></slot>
<p>分隔線2222222</p>
<slot name="a2"></slot>
<p>分隔線333333333</p>
</div>
`,
使用多個(gè)插槽，一個(gè)template放一個(gè)slot
<template slot="a1">
<button>按鈕a1</button>
</template>
<template slot="a2">
<button>按鈕a2</button>
</template>
六、子組件給插槽傳值
1、在子組件template里定義中間數(shù)據(jù)emitmsg，名字可以隨便
<slot name="a1" :emitmsg="sonmsg"></slot>
2、在父組件里用res接收，不管是多少個(gè)子組件，都是用res接收，res是結(jié)果集，如果有多個(gè)slot的話，數(shù)據(jù)都會(huì)在里面
<template slot="a1" slot-scope="res">
{{res.emitmsg}}
</template>
代碼展示
顯示效果：
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
優(yōu)雅的處理vue項(xiàng)目異常實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的處理vue項(xiàng)目異常的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vite打包出現(xiàn)"default"?is?not?exported?by?"no
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)"default"?is?not?exported?by?"node_modules/...問(wèn)題解決的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
Vue.js 無(wú)限滾動(dòng)列表性能優(yōu)化方案
這篇文章主要介紹了Vue.js 無(wú)限滾動(dòng)列表性能優(yōu)化方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
使用antv替代Echarts實(shí)現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實(shí)現(xiàn)數(shù)據(jù)可視化圖表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
element ui的el-input-number修改數(shù)值失效的問(wèn)題及解決
這篇文章主要介紹了element ui的el-input-number修改數(shù)值失效的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
本文介紹了在Vue.js項(xiàng)目中常用的6種數(shù)據(jù)加密方式,包括Base64編碼、MD5哈希、SHA-256哈希、AES加密、RSA加密和使用WebCryptoAPI,每種加密方式都有其優(yōu)缺點(diǎn),適用于不同的場(chǎng)景,感興趣的可以了解一下2024-10-10
vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明
這篇文章主要介紹了vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue項(xiàng)目實(shí)現(xiàn)添加圖片裁剪組件
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)添加圖片裁剪組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹了關(guān)于Vue中$refs的探索，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11