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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
javascript中caller和callee详解
Aug 10 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
vue中的计算属性和侦听属性
Nov 06 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python入门教程 python入门神图一张
2018/03/05 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
Python如何重新加载模块
2020/07/29 Python
python反扒机制的5种解决方法
2021/02/06 Python
python实现学生通讯录管理系统
2021/02/25 Python
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
项目经理聘任书
2014/03/29 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
合作经营协议书范本
2014/09/16 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
防震减灾主题班会
2015/08/14 职场文书
银行服务理念口号
2015/12/25 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
纯html+css实现打字效果
2021/08/02 HTML / CSS