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绑定原理 简单解析与实现代码分享
Sep 06 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
vue实现标签云效果的示例
Nov 09 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
网页里控制图片大小的相关代码
2006/06/25 Javascript
项目实践之javascript技巧
2007/12/06 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python实现的简单计算器功能详解
2018/08/25 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Django REST 异常处理详解
2020/07/15 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书