Vue 多层组件嵌套二种实现方式(测试实例)
程序员文章站
2022-05-14 19:03:20
最近在研究vue组件的学习，给自己留个笔记，也分享给大家，希望能对大家有所帮助
...
最近在研究vue组件的学习，给自己留个笔记，也分享给大家，希望能对大家有所帮助
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue 测试实例-组件嵌套二种方式</title>
<script src="//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);
}
}
});
// 创建根实例
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。