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实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
Nuxt.js实战详解
Jan 18 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
PHP扩展开发入门教程
2015/02/26 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
详解ES6 系列之异步处理实战
2018/10/26 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
分享vim python缩进等一些配置
2018/07/02 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
python中count函数简单的实例讲解
2020/02/06 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
类的返射机制中的包及核心类
2016/09/12 面试题
英文版餐饮业求职信
2013/10/18 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
谢师宴答谢词
2015/01/05 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android