Vue 多层组件嵌套二种实现方式(测试实例)
更新时间：2017年09月08日 09:16:31 作者：itpinpai
本篇文章主要介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue路由第二次进入页面created和mounted不执行问题及解决
这篇文章主要介绍了vue路由第二次进入页面created和mounted不执行问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了基于vue的tab-list类目切换商品列表组件的示例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了详解vue3 沙箱机制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要给大家介绍了关于vue3父子组件传值中props使用细节的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要为大家介绍了Vue3通用API功能示例剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
Vue执行方法,方法获取data值,设置data值,方法传值操作
这篇文章主要介绍了Vue执行方法,方法获取data值,设置data值,方法传值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
对axios进行封装以及将API接口按业务模块统一管理，有助于我们简化代码，方便后期维护。本文介绍了如何用vue封装axios请求，感兴趣的同学，可以参考下。2021-06-06
在本篇文章里小编给大家整理了一篇关于VUE项目中加载已保存的笔记实例方法，有兴趣的读者们可以参考下。2019-09-09
这篇文章主要介绍了vscode vue 文件模板的配置方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
Vue应用中504错误（Gateway timeout）的原因与解决方法
在Vue前端应用中遇到504代理错误通常是由于请求在到达服务器之前超时,504错误表示网关超时,可能由后端服务响应慢、网络问题、代理配置错误、请求负载过大、前端请求超时设置不当、服务器资源不足或第三方服务问题引起2024-09-09
最新评论