本篇文章给大家分享的是有关使用vue怎么给组件传递不同的值,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>Vue实例:父组件给子组件传递不同的值</title> <scriptsrc="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> </head> <script> window.onload=function(){ //全局创建一个Vue组件 Vue.component('todo-item',{ props:['todo'], template:'<li>{{todo.text}}</li>' }) //创建一个vue实例 varapp7=newVue({ el:'#app', data:{ groceryList:[ {id:0,text:'蔬菜'}, {id:1,text:'奶酪'}, {id:2,text:'随便其它什么人吃的东西'} ] } }) } </script> <body> <divid="app"> <ol> <!--现在我们为每个todo-item提供todo对象todo对象是变量,即其内容可以是动态的。我们也需要为每个组件提供一个“key”。--> <todo-itemv-for="itemingroceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item> </ol> </div> </body> </html>
代码分析:
这里我直接使用了一个Vue的CDN,然后实例化Vue对象就可以使用。
创建一个vue实例
varapp7=newVue({ el:'#app', data:{ groceryList:[ {id:0,text:'蔬菜'}, {id:1,text:'奶酪'}, {id:2,text:'随便其它什么人吃的东西'} ] } })
全局创建一个Vue组件
Vue.component('todo-item',{ props:['todo'], template:'<li>{{todo.text}}</li>' })
通过Vue的实例给组件赋不同的值(通过bind绑定值到一个变量上,子组件通过props接受传入的这个变量值)
<divid="app"> <ol> <!--现在我们为每个todo-item提供todo对象todo对象是变量,即其内容可以是动态的。我们也需要为每个组件提供一个“key”。--> <todo-itemv-for="itemingroceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item> </ol> </div>
以上就是使用vue怎么给组件传递不同的值,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。
海报
0 条评论
182
相关文章
本站已关闭游客评论,请登录或者注册后再评论吧~