Vue组件基础
Posted 1156063074hp
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件基础相关的知识，希望对你有一定的参考价值。
gitHub地址：https://github.com/huangpna/vue_learn里面的lesson06
一 vue组件基本实例
举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>app1</title> </head> <body> <div id="app1"> <button-counter></button-counter> <!--注意：点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。--> <button-counter></button-counter> <button-counter></button-counter> </div> </body> <script src="../js/vue.min.js"></script> <script> Vue.component(‘button-counter‘,{ //全局注册一个组件 data:function () { return { count:0 } }, template:‘<div><button @click="count++">点击一下</button> <span>{{count}}</span></div>‘ }); new Vue({el:‘#app1‘}); //创建一个vue实例 </script> </html>
(1)因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
(2)一个组建的data选项必须是一个函数，而不是像之前一样直接接受一个对象
(3)有两种注册注册组件的方式：全局注册和局部注册；至此，我们的注册都只是通过Vue.component全局注册的。
(4)全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
二 通过prop给子组件传递数据
举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>app1</title> </head> <body> <div id="app1"> <button-counter title="My journey with Vue"></button-counter> //通过自定义特性传递值 <button-counter title="Blogging with Vue"></button-counter> <button-counter title="Why Vue is so fun"></button-counter> </div> </body> <script src="../js/vue.min.js"></script> <script> Vue.component(‘button-counter‘,{ //全局注册一个组件 props:[‘title‘], //可以传递任何类型的值 data:function () { return { count:0 } }, template:‘<div><button @click="count++">点击一下</button> <span v-if="count == 1">{{title}}</span></div>‘ //值显示，查看是否传递成功 }); new Vue({el:‘#app1‘}); //创建一个vue实例 </script> </html>
一个组件默认可以用过任意数量的prop,任何值都可以传递给任何 prop。在上述例子中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
一个 prop 被注册之后，你就可以像上面例子一样把数据作为一个自定义特性传递进来。
例子2：
注意：这个时候我们想要给每篇博文渲染一个组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>app2</title> <style> #app2>div{ width:800px; height:160px; background-color: #ff4225; font-size:35px; text-align:center; line-height:160px; margin:0 auto 20px; } </style> </head> <body> <div id="app2"> <my-content v-for="item in dataList" v-bind:num="item.id" v-bind:title="item.title"></my-content> <!--动态传递值--> </div> </body> <script src="../js/vue.min.js"></script> <script> Vue.component(‘my-content‘,{ props:[‘title‘,‘num‘], data:function () { }, template:‘<div>{{title}}------{{num}}</div>‘ }); new Vue({ el:‘#app2‘, data:{ dataList: [ { id: 1, title: ‘博文组件‘ }, { id: 2, title: ‘博文组件‘ }, { id: 3, title: ‘博文组件‘ } ] } }); </script> </html>
但是很多时候我们的博文不止需要标题和内容，可能要传递的数据更多，这个时候组件就会变得越来越复杂，这个时候你可以变成只接受一个单独的dataList props。
注意：必须将组件模板包含在一个父元素内，否则会报错。
以上是关于Vue组件基础的主要内容，如果未能解决你的问题，请参考以下文章