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 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
window.location.hash 使用说明
Nov 08 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
图解javascript作用域链
May 27 Javascript
简单了解小程序+node梳理登陆流程
Jun 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
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
js获取url传值的方法
2015/12/18 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
纪念建党演讲稿范文
2014/01/13 职场文书
环保宣传标语
2014/06/12 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
监理中标通知书
2015/04/16 职场文书
2015年加油站工作总结
2015/05/13 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
入团申请书格式
2019/06/20 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python