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。介绍到这里相信大家都明白了组件的创建了。
那么通常一个应用会一颗嵌套的组件