Vue 多层组件嵌套二种实现方式(测试实例)


Posted in Javascript onSeptember 08, 2017

最近在研究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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
JavaScript实现图片拖曳效果
Sep 08 #Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 #Javascript
javascript将list转换成树状结构的实例
Sep 08 #Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 #Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 #Javascript
js HTML5 canvas绘制图片的方法
Sep 08 #Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
PHP 八种基本的数据类型小结
2011/06/01 PHP
javascript中对对层的控制
2006/12/29 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
Javascript学习指南
2014/12/01 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
什么是lambda函数
2013/09/17 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
综合测评自我鉴定
2013/10/08 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
学生期末评语大全
2014/04/30 职场文书
525心理活动总结
2014/07/04 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
初中英语教学随笔
2015/08/15 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技