欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
南昌小程序开发_Vue完成的父组件向子组件传值功
时间: 2021-01-08 10:27 浏览次数:
Vue完成的父部件向子部件传值作用实例 本文关键详细介绍了Vue完成的父部件向子部件传值作用,融合详细案例方式简易剖析了vue.js部件传值的有关实际操作方法,必须的朋友能够参照
Vue实现的父组件向子组件传值功能示例       这篇文章主要介绍了Vue实现的父组件向子组件传值功能,结合完整实例形式简单分析了vue.js组件传值的相关操作技巧,需要的朋友可以参考下

本文实例讲述了Vue实现的父组件向子组件传值功能。分享给大家供大家参考,具体如下:

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" 
 title Vue 父组件向子组件传值 /title 
 script src="vue/2.2.2/vue.min.js" /script 
 /head 
 body 
 div id="app" 
 !-- 把字符串传给子组件 -- 
 todo-item v-for="item in sites" v-bind:item="item" /todo-item 
 /ol 
 !-- 把数组的值传给子组件 -- 
 myname :name="name" /myname 
 /div 
 script 
ponent('todo-item', {
 // pro凡科抠图: ['item'],
 pro凡科抠图: {
 item : String,
 template: ' li {{ item.text }} /li '
ponent('myname', {
 pro凡科抠图: ['name'],
 // pro凡科抠图: {
 // 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: 'jb51' },
 { text: 'Google' },
 { text: 'Taobao' }
 name: [
 { text: 'lee' },
 { text: 'jane' },
 { text: 'nike' }
 /script 
 /body 
 /html 

这里使用在线HTML/CSS/JavaScript代码运行工具测试上述代码,可得如下运行结果:

希望本文所述对大家vue.js程序设计有所帮助。


下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园