Vue实现的父组件向子组件传值功能示例


Posted in Javascript onJanuary 19, 2019

本文实例讲述了Vue实现的父组件向子组件传值功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 父组件向子组件传值</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <!-- 把字符串传给子组件 -->
  <ol>
  <todo-item v-for="item in sites" v-bind:item="item"></todo-item>
   </ol>
  <!-- 把数组的值传给子组件 -->
  <myname :name="name"></myname>
</div>
<script>
Vue.component('todo-item', {
 // props: ['item'],
 props: {
  item : String,
 },
 template: '<li>{{ item.text }}</li>'
})
Vue.component('myname', {
 props: ['name'],
 // props: {
  // name : Array,
 // },
 template: '<div><li v-for="(item,index) in name">{{ item.text }}-{{index+1}}</li></div>'
 //需要有一个根元素标签包含子组件循环,vue react都要把东西变成一个块才能循环出来
})
new Vue({
 el: '#app',
 data: {
  sites: [
   { text: '3water' },
   { text: 'Google' },
   { text: 'Taobao' }
  ],
  name: [
   { text: 'lee' },
   { text: 'jane' },
   { text: 'nike' }
  ]
 }
})
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

Vue实现的父组件向子组件传值功能示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js实现的折叠导航示例
Nov 29 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
vue-router命名视图的使用讲解
Jan 19 #Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 #Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 #Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 #Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 #Javascript
详解vue-router导航守卫
Jan 19 #Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 #Javascript
You might like
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python并发编程之线程实例解析
2017/12/27 Python
python实现教务管理系统
2018/03/12 Python
python队列queue模块详解
2018/04/27 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
在python中bool函数的取值方法
2018/11/01 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
应聘英语教师求职信
2014/04/24 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
五心教育心得体会
2014/09/04 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python