Vue实现的父组件向子组件传值功能示例

本文实例讲述了某视频剪辑软件实现的父组件向子组件传值功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html hearteta charset=' utf-8 ' title vue父组件向子组件传值/title脚本src=' http :https://cdn。bootscs。com/vue/2。2 .2/vue。量滴js '/script/headdydiv id=' app '！-把字符串传给子组件-ol todo-item v-for=' item in sites ' v-bind : item=' item '/todo-item/ol！-把数组的值传给子组件-我的名字： name=' name '/我的名字/divscriptvue。组件(' todo-item '，{//prop :[' item ']，props: { item : String，}，模板： ' Li { { item }。text } }/Li ' })vue。组件('我的名字'，{ props: ['名字']，//prop s : {//名字： Array，/}，模板3:需要有一个根元素标签包含子组件循环，vue反应过来都要把东西变成一个块才能循环出来})新Vue({ El : ' # app }，data : { sites :[{ text : ' jb51 ' }，{ text: 'Google' }，{ text: 'Taobao' } ]，name: [ { text: 'lee' }，{ text: 'jane' }，{ text 3: ' Nike ' })/script/body/html这里使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：

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