Vue全局组件与局部组件笔记

组件要注意的事项有：

1、组件的data要用函数,一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

Vue.component('组件名',{
     template:'<p>这是一个组件里的模板</p>',           //这些都是选项
     data:function(){
       return{
         count: 0
       }
     }
})

组件有两种，一种是全局组件，另一种是局部组件

全局组件可以在任何vue实例使用

Vue.component('runoob', {            //注册全局组件
  template: '<h1>自定义组件!</h1>'
})

// 创建根实例
new Vue({               
  el: '#app'            //可以在这个实例使用
})
//创建第二个实例
new Vue({               
  el: '#app2'            //也可以在这个实例使用
})

局部组件

var Child = {
  template:'<h1>这是一个用变量定义的组件的值</h1>'
}
// 创建根实例
new Vue({
  el: '#app',
  components: {                  //注册局部组件,只能在这个实例使用
    'runoob': Child                 //组件名 : 组件的值，可以直接写，也可以像本例子一样用变量对象
  }
})

//第二个实例
new Vue({
  el: '#app'             //这里用不了上面的局部组件
})

局部组件只能在注册的那个实例上使用，如果想要局部组件里用局部组件，就要在局部组件里注册

例子：

var cop1 = {         //用变量定义的局部组件1的值
template:'<h1>这是一个局部组件，并且值是用对象定义的</h1>'
}
var cop2 = {              //组件2 的值
  template:'<div><h3>这里是局部注册组件2，不过我在里面注册了cop1组件，所以可以用</h3><zj-1></zj-1><p>像这些有多个元素的模板，我们需要用一个父元素div包裹他，这样就能正常显示</p></div>',
  components:{
    'zj-1':cop1            //注册了组件1，所以可以使用组件1
  }
}


new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,         //局部组件1
    'component-b': ComponentB          //局部组件2
  }
})