vue第四天component初级

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"