全局注册

用 Vue.component 来创建组件：

Vue.component(‘my-component-name’, {

// … 选项 …

})

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：

Vue.component(‘component-a’, { /* … / })

Vue.component(‘component-b’, { / … / })

Vue.component(‘component-c’, { / … */ })

new Vue({ el: ‘#app’ })

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。

局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* … / }

var ComponentB = { / … / }

var ComponentC = { / … */ }

然后在 components 选项中定义你想要使用的组件：

new Vue({

el: ‘#app’,

components: {

‘component-a’: ComponentA,

‘component-b’: ComponentB

}

})

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* … */ }

var ComponentB = {

components: {

‘component-a’: ComponentA

},

// …

}

或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from ‘./ComponentA.vue’

export default {

components: {

ComponentA

},

// …

}

注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

用在模板中的自定义元素的名称

包含了这个组件选项的变量名

全局注册，注册的组件需要在初始化根实例之前注册了组件；

局部注册，通过使用组件实例选项注册，可以使组件仅在另一个组件或者实例的作用域中可用：

全局组件

js

Vue.component('tab-title',{   props:['title'],   template:'
{{title}}
'
 }) Vue.component('tab-content',{   props:['content'],   template:'
{{content}}
'
 })

局部组件demo：

html

js

var app=new Vue({
      el: '#app',
     components: {       'tab-title': {
        props:['info'],//接受父元素传递的参数
        template:'
{{info}}
'//点击时传递通过$emit子元素传递给父元素调用 addactive方法（不能使用驼峰写法）
        },       'tab-content':{
         props:["content"],
        template:'
{{content}}
'
       }
     },
     methods:{
       switchActive:function(index){        for(var i=0;i
组件实例的作用域是孤立的。这意味着不能再子组件的模板内直接引用父组件的数据。要让子组件可以使用父组件的数据，我们需要通过子组件的props选项。
子组件要显式地用 props 选项声明它期待获得的数据
在模板中，要动态地绑定父组件的数据到字模板的props,与绑定到任何普通的HTMO特性相类似。就是使用 v-bind。每当父组件的数据变化时，该变化也会传递给子组件：
所有的vuejs组件都是被扩展的vue实例
每一个Vue实例都会代理这个实例的data属性对象里的所有的属性
所有的Vue实例本身保罗的属性和方法，都以$开头来区别，对应Vue.set
例如：
vm.$data
vm.$methods
vm.$watch
这个有利于和data属性对象的数据来区分
多有的指令都以v-xxx形式存在：
                                                                    

                                                        
            

组件是 vue最强大的功能之一，在项目中我们经常会用到很多可复用的代码块，通过封装可重用的代码不仅提高了组件的可重用性，而且每个 Vue 组件都是Vue的实例，可接受相同的选项对象并提供相同的生命周期钩子。这就让项目调试起来更加简单方便，整个开发效果也更高，可维护性也更强，也能适合多人协同开发来构建大型应用。同时组件也是资源独立的，组件在系统内部可复用，组件和组件之间也可以嵌套。

全局组件:  如果想组件在任何地方都能应用，我们就需要注册全局组件
局部组件:  局部组件要挂载到实例元素（在实例中定义组件）上，否则没有效果

全局注册与局部注册

全局注册是vue。

局部注册时this。

为什么要分这两种注册方式呢，有什么意义？

局部注册组件

组件在vue实例内部进行局部注册时，该组件只能在vue实例控制范围内使用(即注册到哪一个DOM元素下则在哪个DOM元素下生效)。局部注册可以使用vue实例对象中的components属性来实现，auxiliaryGrid这个变量名是用在模板中的自定义元素的名称，我们可以使用该变量名在模板中调用对应的组件。

全局注册组件

顾名思义就是将组件注册在Vue根实例模板中，这样在根组件下的任何子组件中都可以使用该组件(组件内部也是可以调用自己的)。当某个组件在项目中使用频率很高且使用地方很广时，就可以考虑将改组件注册成全局组件。Vue注册一个全局组件可以在main.js文件中使用 Vue.component(componentName, options)命令来实现，componentName为组件定义的名称，options为需要注册的组件对象。

组件在vue实例内部进行局部注册时，该组件只能在vue实例控制范围内使用(即注册到哪一个DOM元素下则在哪个DOM元素下生效)。局部注册可以使用vue实例对象中的components属性来实现，auxiliaryGrid这个变量名是用在模板中的自定义元素的名称，我们可以使用该变量名在模板中调用对应的组件。

顾名思义就是将组件注册在Vue根实例模板中，这样在根组件下的任何子组件中都可以使用该组件(组件内部也是可以调用自己的)。当某个组件在项目中使用频率很高且使用地方很广时，就可以考虑将改组件注册成全局组件。Vue注册一个全局组件可以在main.js文件中使用 Vue.component(componentName, options)命令来实现，componentName为组件定义的名称，options为需要注册的组件对象。

全局注册
全局注册在main.js中，全局注册后，在任意xx.vue页面都可以使用。

局部注册

只能在本页面使用，适合轮播图这样的组件

vue extend 的基本使用

vue.extend 局部注册 的应用2

请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。所以他不能直接在new Vue中这样使用： new Vue({components: fuck})

最终还是要通过Vue.components注册才可以使用的。 

    


[removed][removed]
[removed]
/**
 * 请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。
 * 所以他不能直接在new Vue中这样使用： new Vue({components: fuck})
 * 最终还是要通过Vue.components注册才可以使用的。 
 */

// 构建一个子组件
var todoItem = Vue.extend({
    template: ` 
 {{ text }} 
 `,    props: {
        text: {
            type: String,
            default: ''
        }
    }
})

// 构建一个父组件
var todoWarp = Vue.extend({
    template: `        
                    
    `,
    props: {
      todoData: {
          type: Array,
          default: []
      }
    },
    // 局部注册子组件    components: {
        todoItem: todoItem
    }
})

// 注册到全局Vue.component('todo', todoWarp)

new Vue({
    el: '#app',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '随便其它什么人吃的东西' }
        ]
    }
})
[removed]

54、vue.extend 局部注册 的应用1

请注意，在实例化extends组件构造器时，传入属性必须是propsData、而不是props哦

另外，无论是Vue.extend还是Vue.component 里面的data定义都必须是函数返回对象，如 Vue.extend({data: function () {return {}}})。除了new Vue可以直接对data设置对象之外吧，如 new Vue({data: {}});

[removed][removed]
[removed]

// 局部注册组件
var todoItem = Vue.extend({
  data: function () {
        return {
            todoData: [
              { id: 0, text: '蔬菜' },
              { id: 1, text: '奶酪' },
              { id: 2, text: '随便其它什么人吃的东西' }
            ]
        }
  },
  template: `        
            

                {{ d.text }}            
        
  `
});

// 请注意，在实例化extends组件构造器时，传入属性必须是propsData、而不是props哦
new todoItem({
  propsData: {
      todoData: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }
      ]
  }
}).$mount('#todoItem')

[removed]