小编给大家分享一下Vue实现多层组件嵌套的方法有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!实例如下:<!DOCTYPE html> <html>
小编给大家分享一下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>
看完了这篇文章,相信你对“Vue实现多层组件嵌套的方法有哪些”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网html频道,感谢各位的阅读!
--结束END--
本文标题: Vue实现多层组件嵌套的方法有哪些
本文链接: https://www.lsjlt.com/news/71148.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0