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 相关文章推荐
Javascript 写的简单进度条控件
Jan 22 Javascript
两个Javascript小tip资料
Nov 23 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
Angular2之二级路由详解
Aug 31 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
JavaScript实现五子棋小游戏
Oct 26 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
python目录与文件名操作例子
2016/08/28 Python
django定期执行任务(实例讲解)
2017/11/03 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
电大会计学自我鉴定
2014/02/06 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
教书育人演讲稿
2014/09/11 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
Redis三种集群模式详解
2021/10/05 Redis
nginx搭建NFS网络文件系统
2022/04/14 Servers