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实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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
zend framework多模块多布局配置
2011/02/26 PHP
php 文件上传实例代码
2012/04/19 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
php中namespace及use用法分析
2016/12/06 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python中from module import * 的一个坑
2014/07/20 Python
python实现人脸签到系统
2020/04/13 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
党校自我鉴定范文
2013/10/02 职场文书
小学老师寄语大全
2014/04/04 职场文书
事假请假条范文
2014/04/11 职场文书
服务标兵事迹材料
2014/05/04 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
销售口号大全
2014/06/11 职场文书
装修活动策划方案
2014/08/27 职场文书
个人租房协议书范本
2014/09/30 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
计划生育汇报材料
2014/12/26 职场文书
预备党员表决心的话
2015/09/22 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
css背景和边框标签实例详解
2021/05/21 HTML / CSS
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers