Vue中的組件詳談
一、組件的注冊
組件注冊需要注意的有五點(diǎn)：
1、data要寫成函數(shù)，并且用return返回一個值，這樣不同的調(diào)用才能互不影響
2、template后面跟的是飄號，就是Tab上面那個鍵
3、template后面的內(nèi)容要寫在一個大的div里面，不要分開多個div
4、props后面的是數(shù)組，因?yàn)橛泻芏鄠€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)
}
}
})
二、組件的使用
使用時只要注意一點(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>
三、父傳子
父傳子比較簡單，分成兩步
1、在組件里定義prop
props:["sonprop"]
2、使用組件時，用定義的prop綁定父的值
<myson :sonprop="parentmsg"></myson>
父里面的值是這樣的
data:{
parentmsg:"parentmsg to sonprop"
}
詳細(xì)傳遞過程是這樣的，看起來比較復(fù)雜，其實(shí)就上面說的兩步
四、子傳父
子組件給父傳數(shù)值要通過方法來傳遞，父和子各定義一個方法，然后用一個中間方法來連接，記住這個中間方法的使用就行了，步驟詳細(xì)分解開挺多的
1、在子組件的template的button里使用一個點(diǎn)擊事件
<button @click="sonclick">按鈕</button>
2、在子組件里定義上面使用的方法，觸發(fā)一個中間方法并傳遞數(shù)據(jù)
sonclick(){
this.$emit("sonemit",this.sonmsg)
}
3、父使用子組件時，用中間方法綁定自己的方法
<myson @sonemit="parentclick"></myson>
4、在父的方法里接收數(shù)據(jù)，這里p可以寫成任意字符
parentclick(p){
vm.parentmsg=p;
}
詳細(xì)代碼圖
運(yùn)行效果
五、插槽
1、加入插槽，插槽就是在組件里留一個空位，使用組件時可以插入任意東西
在子組件某個位置定義：<slot></slot>
使用組件時就可以在該位置添加任意標(biāo)簽
2、加入多個插槽時，要為每個插槽命名，使用時每個slot要放在一個template里面
定義多個插槽
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>
`,
使用多個插槽，一個template放一個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接收，不管是多少個子組件，都是用res接收，res是結(jié)果集，如果有多個slot的話，數(shù)據(jù)都會在里面
<template slot="a1" slot-scope="res">
{{res.emitmsg}}
</template>
代碼展示
顯示效果：
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
Vue2?與?Vue3?的數(shù)據(jù)綁定原理及實(shí)現(xiàn)
這篇文章主要介紹了Vue2與Vue3的數(shù)據(jù)綁定原理及實(shí)現(xiàn)，數(shù)據(jù)綁定是一種把用戶界面元素的屬性綁定到特定對象上面并使其同步的機(jī)制，使開發(fā)人員免于編寫同步視圖模型和視圖的邏輯2022-09-09
在前后端的開發(fā)中總是難免會遇到前后端的跨域問題,下面這篇文章主要給大家介紹了關(guān)于vue2中vue.config.js簡單配置代理跨域的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
下面小編就為大家分享一篇vue2.0 循環(huán)遍歷加載不同圖片的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文從零搭建vue項(xiàng)目，給大家分享了我的vue2-webpack2框架搭建踩坑之路,需要的朋友可以參考下2017-12-12
vue項(xiàng)目使用cdn加速減少webpack打包體積
通過壓縮代碼的手段可減小網(wǎng)絡(luò)傳輸?shù)拇笮?但實(shí)際上最影響用戶體驗(yàn)的還是網(wǎng)頁首次打開時的加載等待,其根本原因是網(wǎng)絡(luò)傳輸過程耗時較大,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用cdn加速減少webpack打包體積的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue router 用戶登陸功能的實(shí)例代碼,主要用到H5中的會話存儲（sessionStorage）、vue-router路由前置操作、路由元信息(meta)等知識點(diǎn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-04-04
vue推薦組件化開發(fā)，所以就把每個圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。接下來給大家介紹vue 中 echart 在子組件中只顯示一次的問題，需要的朋友參考下吧2018-08-08
vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)
這篇文章主要介紹了vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
Monaco-editor,一個vs?code?編輯器,需要將其繼承到項(xiàng)目,這篇文章主要為大家詳細(xì)介紹了如何在vue中安裝和使用Monaco-editor,有需要的小伙伴可以參考下2023-11-11