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中路由使用this.$router.go(-1)返回两次问题
这篇文章主要介绍了在vue中路由使用this.$router.go(-1)返回两次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
这篇文章主要介绍了vue+mousemove实现鼠标拖动功能,文中给大家介绍了鼠标移动过快拖动就失效问题的解决方法,需要的朋友可以参考下2018-08-08
最新评论