前言

在

基本

一、组件注册

1.通过Vue.extend()创建，然后由component来注册

复制代码
//  extend 创建组件var MyComponent = Vue.extend({   template: '<div>A custom component!</div>' });  // component注册 组件Vue.component('my-component', MyComponent);//使用到了 extend 创建的组件var vm = new Vue({   el: '#app',   data: {           } })
复制代码

说明：

  • 1. Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器。 
  • 2. Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。 
  • 3. 使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。 
  • 4. 组件应该挂载到某个Vue实例下，否则它不会生效。

extend 是构造创建一个组件的语法器，你给它参数 他给你创建一个组件， 然后这个组件，你可以作用到Vue.component 这个全局注册方法里， 也可以在任意vue模板里使用组件

var demo= Vue.extend({ 
…. 
}) 
Vue.component(‘demo’,demo)

 可见上边的定义过程比较繁琐，也可以不用每次都调用两个，可以直接用 Vue.component 创建 ，也可以取组件 例如下

var demo= Vue.component(‘demo’)

2.全局注册

如果我们定义了多个 vue实例，我们都可以使用这一个组件

复制代码
<div id="app">    <my-component></my-component></div><script>//注意要在vue实例之前去定义，不然渲染页面的时候，会报错   // 定义一个名为 myComponent 的新组件 Vue.component(' myComponent ', {      template: `              <div id=" my-component ">                 <p>2018 <a href="#">艾三元</a> - Hosted by <a href="#" style="font-weight: bold">Coding Pages</a></p>                 <p>                     <a href="#">京ICP备00000000号</a>                 </p>             </div>              `,      data () {          return {              message: 'hello world'          }      }  })    var app = new Vue({     el: '#app',//没错，vue实例所定义的DOM元素就是这个，超过了这个区域，定义的组件会无效    data: {     },   }) </script>
复制代码

3.局部注册

表示只有在当前页面的app元素内使用

复制代码
var app = new Vue({     el: '#app',     data: {     },     components: {           'my-component': {//这个就是我们局部组件的名字 在页面内使用 <my-component></my-component>         template: `              <ul class ="contact-list non-style-list">              <li>                 <b class ="component">组件</b>: <a href="