vue初学day04
vue组件
1.组件化
在vue中,我们通过Vue.extend来创建Vue的子类,这个东西其实就是组件
也就是说Vue实例和组件的实例有差别但是差别不带,因为毕竟一个是父类一个是子类
一般的应用,会拥有一个根实例,在根实例里面都是一个一个的组件
因为组件是要嵌入到实例或者父组件里的,也就是说,组件可以互相嵌套,而且,所有的组件最外层必须有一个根实例,所以组件分为:全局组件和局部组件
全局组件在任意的实例、父级组件中都能使用,局部组件只能在创建自己的父级组件或者实例中使用
组件通过不同的注册方法成为全局、局部组件
优点:代码复用,便于维护
划分组件的原则:复用率高的,独立性强的
组件应该拥有的特性:可组合,可重用,可测试,可维护
2.创建组件
①全局组件
两个步骤,创建和注册
var App = Vue.extend({
//创建
template:"<h1>hello world</h1>" //这里是渲染出来的结构
})
Vue.component('my-app',App); //注册 第一个参数是使用时的标签名,第二个是注册的组件
//全局组件在任意vue实例都可以使用
<my-app><my-app> //html中这样使用
这样有点麻烦,还要分两步,还有简便写法
Vue.component("hello",{
template: "<h1>我是h1</h1>"
})
②局部组件,顾名思义,只可以在自己对应的vue实例中使用,也不再写在全局,而是写在vue实例中components处
new Vue({
el: "#app1"