vue组件的创建
Posted 摇曳时光
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue组件的创建相关的知识，希望对你有一定的参考价值。
vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。
那接下来就跟我看一下如何在一个Vue实例中使用组件吧！
这里有一个Vue组件的示例：
Vue.component(\'Vheader\',{ data:function(){ return { } }, template:`<div class="header"> <div class="w"> <div class="w-l"> <img src="./logo.png"/> </div> <div class="w-r"> <button>登录</button><button>注册</button> </div> </div> </div>` })
组件是可复用的Vue实例，并且带有一个名字：在这个例子中是 <Vheader>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="app"> <Vheader></Vheader> </div>
var app = new Vue({
el:\'#app\',
data:{
}
})
效果显示：
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项
组件的复用
<div id="app"> <Vheader></Vheader> <br> <Vheader></Vheader> <br> <Vheader></Vheader> </div>
页面效果如下：
给Vheader组件中添加一个按钮，绑定数据属性count，然后你会发现点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
在创建组件过程中第一个参数是组件的名字，第二个参数是跟new Vue实例一样的options。跟实例对象不同的是有两点：
关于组件名的起名：https://cn.vuejs.org/v2/guide/components-registration.html
1、组件中没有el，因为el仅仅的是绑定Vue的根元素。
2、data属性不再是返回对象，而是返回一个函数。而且必须返回一个函数。
ok。介绍到这里相信大家都明白了组件的创建了。
那么通常一个应用会一颗嵌套的组件
以上是关于vue组件的创建的主要内容，如果未能解决你的问题，请参考以下文章