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 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
js href的用法
May 13 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
详解vue路由
Aug 05 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集成FCK的函数代码
2008/09/27 PHP
php的大小写敏感问题整理
2011/12/29 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
js回调函数仿360开机
2019/12/26 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python tornado上传文件的功能
2020/03/26 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
公司员工检讨书
2014/02/08 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
书法大赛策划方案
2014/06/04 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
旷课检讨书500字
2014/10/14 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
三八妇女节寄语
2015/02/27 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript