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 相关文章推荐
jQuery图片轮播的具体实现
Sep 11 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
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
PHP常用代码
2006/11/23 PHP
MySQL相关说明
2007/01/15 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
javascript元素动态创建实现方法
2015/05/13 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
通过实例学习React中事件节流防抖
2019/06/17 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python登录系统界面实现详解
2019/06/25 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
专科文秘应届生求职信
2013/11/18 职场文书
史上最牛的辞职信
2015/02/28 职场文书
产品调价通知函
2015/04/20 职场文书
美丽的大脚观后感
2015/06/03 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python