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中的运用上部
Nov 20 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
学习vue.js条件渲染
Dec 03 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
JsChart组件使用详解
Mar 04 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
Vue+Openlayers自定义轨迹动画
Sep 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
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
Python深入06——python的内存管理详解
2016/12/07 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
python中str内置函数用法总结
2020/12/27 Python
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
建筑学推荐信
2013/11/03 职场文书
酒吧创业计划书
2014/01/18 职场文书
物理教学随笔感言
2014/02/22 职场文书
学雷锋的心得体会
2014/09/04 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL