最近想起來把vue的東西整理一下侈离,一來為了鞏固自己的記憶试幽,二來為了能夠讓大家相互學習,走起卦碾!
1.注冊組件
第一種:
在組件內的script標簽聲明一個變量:
const local_component = {template: '<div>我是注冊的組件</div>' }
在script中的 export default下創(chuàng)建:
components: {
'local_component': local_component,
}
在當前組件內的 template 直接引入以下代碼即可:
<local_component></local_component>
第二種:
直接 components: {
'local_component': {template: '<div>我是注冊的組件</div>' }
}
同樣在當前組件內的 template 直接引入以下代碼即可:
<local_component></local_component>
2.對組件的復用
上面的組冊組件里面的傳值都是死的铺坞,利用率不高,現(xiàn)在我們把它改成動態(tài)的洲胖。
第一種:
在components: {
'zujian':{props:['cont'],template: '<div>{{ cont }}</div>'},
}
(也就是說通過props動態(tài)的傳遞我們想要傳遞的數(shù)據(jù)济榨,cont為定義的屬性名)
在當前組件內的 template 直接引入以下代碼即可:
<zujian cont="我是自己填寫的數(shù)據(jù)內容"></zujian>
這樣就是一個簡單組件復用。
第二種:
一次循環(huán)多個組件出來
在components: {
'OList':{ props: ['todo'],template: '<div>{{ todo.text }}</div>'}
}
我們可以使用 v-bind 指令將待辦項傳到循環(huán)輸出的每個組件中
<!--
現(xiàn)在我們?yōu)槊總€ OList 提供 todo 對象
todo 對象是變量绿映,即其內容可以是動態(tài)的擒滑。
我們也需要為每個組件提供一個“key”。
-->
在當前組件內的 template 直接引入以下代碼即可:
<OList
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></OList>
在 export default 下創(chuàng)建
data(){
return{
groceryList: [
{ id: 0, text: '我是循環(huán)出來的組件1' },
{ id: 1, text: '我是循環(huán)出來的組件2' },
{ id: 2, text: '我是循環(huán)出來的組件3' }
]
}
}
歐克這樣所有的就搞定??叉弦!覺得有用的小伙伴點個關注和小紅心就行??丐一,么么噠。