本文实例讲述了Vue实现的父组件向子组件传值功能。分享给大家供大家参考,具体如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue父组件向子组件传值& lt;/title>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.2.2/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; !——把字符串传给子组件——比;
& lt; ol>
& lt; todo项v="项目在网站“v-bind:项=拔锲贰弊４? lt;/todo-item>
& lt;/ol>
& lt; !——把数组的值传给子组件——比;
& lt;名字:name=皀ame”祝辞& lt;/myname>
& lt;/div>
& lt; script>
Vue.component(“待办事宜”,{//道具:(“项目”),
道具:{
项目:字符串,
},
模板:“& lt; li>{{项目。文本}}& lt;/li>”
})
Vue.component(“名字”,{
道具:['名称'),//道具:{//名称:数组,//},
模板:“& lt; div> & lt;李v=?项目、索引)名称”在{{项目。文本}}-{{指数+ 1}}& lt;/li> & lt;/div>//需要有一个根元素标签包含子组件循环,vue反应都要把东西变成一个块才能循环出来
})
新Vue ({
埃尔:“#应用”,
数据:{
网站:[
{文本:“jb51”},
{文本:“谷歌”},
{文本:“淘宝”}
),
名称:[
{文本:“李”},
{文本:“简”},
{文本:“耐克”}
]
}
})
& lt;/script>
& lt;/body>
& lt;/html>
之前
这里使用http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行结果:
希望本文所述对大家vue.js程序设计有所帮助。
