Vue 多層組件嵌套二種實現(xiàn)方式(測試實例)
更新時間：2017年09月08日 09:16:31 作者：itpinpai
本篇文章主要介紹了Vue組件嵌套二種實現(xiàn)方式(測試實例)，具有一定的參考價值，代碼很簡單，感興趣的小伙伴們可以參考一下
最近在研究vue組件的學(xué)習(xí)，給自己留個筆記，也分享給大家，希望能對大家有所幫助
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例-組件嵌套二種方式</title>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
</head>
<body>
<div id="app">
<Itemlist1>
<Item v-for="item in items1" :data="item"/>
</Itemlist1>
<Itemlist2 :itemlist="items2"></Itemlist2>
</div>
<script>
Vue.component('Item',{
template: '<div>{{data.name}}</div>',
props: {
data:Object
}
});
// 方式一：嵌套組件時用<slot></slot>,
Vue.component("Itemlist1", {
template: '<div @click="ok"><slot></slot></div>',
props: {
itemList: Array
},
methods: {
ok: function() {
alert(this.abc);
}
}
});
// 方式二：
Vue.component("Itemlist2", {
template: '<div @click="ok"><Item v-for="item in itemlist" :data="item"/></div>',
props: {
itemlist: Array
},
methods: {
ok: function() {
alert(this.abc);
}
}
});
// 創(chuàng)建根實例
var vueApp = new Vue({
el: '#app',
data: {
items1: [{
'name': "item1"
}, {
'name': "item2"
}, {
'name': "item3"
}],
items2: [{
'name': "item1-1"
}, {
'name': "item2-1"
}, {
'name': "item3-1"
}]
}
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中checkbox如何修改為圓形樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue3中使用scss加上scoped導(dǎo)致樣式失效問題
這篇文章主要介紹了vue3中使用scss加上scoped導(dǎo)致樣式失效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-treeselect及el-tree點擊節(jié)點獲取上級節(jié)點的數(shù)據(jù)方式
這篇文章主要介紹了vue-treeselect及el-tree點擊節(jié)點獲取上級節(jié)點的數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了一篇Vue、React重點詳解大全，文章內(nèi)容詳細(xì)，通過案例可以更好的理解其相關(guān)知識，需要的朋友可以參考下2023-01-01
vue?element-plus圖片預(yù)覽實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue?element-plus圖片預(yù)覽實現(xiàn)的相關(guān)資料,最近的項目中有圖片預(yù)覽的場景,也是踩了一些坑,在這里總結(jié)一下,需要的朋友可以參考下2023-07-07
本篇文章主要介紹了在Vue.js中使用Mixins的方法，Vue的Mixins是非常實用的編程方式，可以使代碼變得容易理解，有興趣的一起來了解一下2017-09-09
Vue3中使用defineCustomElement 定義組件詳解
這篇文章主要為大家介紹了Vue3中使用defineCustomElement 定義組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了Vue中引入json的三種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
今天小編就為大家分享一篇vue.js 添加 fastclick的支持方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue如何調(diào)用攝像頭實現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07