Vue 多层组件嵌套二种实现方式(测试实例)
内容摘要
这篇文章主要为大家详细介绍了Vue 多层组件嵌套二种实现方式(测试实例)，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记！
最近在研究vue组
对此感兴趣的朋友，看看idc笔记做的技术笔记！
最近在研究vue组
文章正文
这篇文章主要为大家详细介绍了Vue 多层组件嵌套二种实现方式(测试实例)，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记！
最近在研究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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持php教程。
注：关于Vue 多层组件嵌套二种实现方式(测试实例)的内容就先介绍到这里，更多相关文章的可以留意
代码注释
作者：喵哥笔记
