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的动画类 Fx.js
Nov 05 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
Jqprint实现页面打印
Jan 06 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
react 创建单例组件的方法
Apr 26 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
vue3.0 上手体验
Sep 21 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
如何在PHP中进行身份认证
2006/10/09 PHP
php中去除所有js,html,css代码
2010/10/12 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python Requests库基本用法示例
2018/08/20 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
护理自荐信
2013/10/22 职场文书
煤矿安全承诺书
2014/05/22 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
校运会加油稿大全
2015/07/22 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
python 实现体质指数BMI计算
2021/05/26 Python