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 相关文章推荐
js 格式化时间日期函数小结
Mar 20 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
JavaScript WeakMap使用详解
Feb 05 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引擎的发展 [15]
2006/10/09 PHP
由php if 想到的些问题
2008/03/22 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
php 安全过滤函数代码
2011/05/07 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
javascript从image转换为base64位编码的String
2014/07/29 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
jquery自定义表单验证插件
2016/10/12 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Python对象与引用的介绍
2019/01/24 Python
解析python的局部变量和全局变量
2019/08/15 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
工程技术员岗位职责
2014/03/02 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
离婚案件原告代理词
2015/05/23 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Pygame Time时间控制的具体使用详解
2021/11/17 Python
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs