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程序设计有所帮助。