VUE 组件化

组件化与模块化的区别

按照网站的功能或者性能可以分为好几个模块，组件则是某块部分功能，一个模块可以由好多组件组成。
比如：一个机器人由手、腿、头、身体组成，手和腿等就是几个模块，而手指头就是组件，这样说更加的形象。

创建组件

组件其实是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件可以相互嵌套调用，组件分为全局组件和局部组件

1.全局组件

 <div id='app'>
   <my-con />
 </div>
 <script>
   Vue.component('myCon', {
     template: '<div>hello</div>'
   })

   new Vue({
     el: '#app',
   })
  </script>

全局组件可以在vue实例的任何地方调用，可以在其自身的子组件中被调用

2.局部组件

 <div id='app'>
   <my-con />
 </div>
 <script>
 const myCon = {
      template: `<div>hello</div>`
   }
   new Vue({
     el: '#app',
     components: { myCon }   // components 不要写成 component
   })
</script>

注意：

1.在使用组件的时候，vue的实例一定要有挂载对象el，否则vue的组件会被解析为一个自定义的dom对象

2.在组件（全局组件或者局部组件）中定义data值得写法一定要是一个函数的形式，返回一个对象

//  1.全局组件
 Vue.component('myCon', {
        template: '<div>hello {{mess}}</div>',
        data() {
          return {
            mess: 'word'
          }
        }
      })
      
 // 2.局部组件    
      const myCon = {
        template: `<div>hello</div>`,
        data(){
          return {
            mess:'word'
          }
        }
      }

这样的原因：
组件是为了能多次调用且相互之间不受影响而创建的，如果直接以对象的形式存在

data：{
mess：‘word’
}

则会相互影响，一个值改变，则只有使用该组件的所有地方都会发生改变，所以尤大神，在创建vue的时候，将组件中的data值定义为一个函数，返回值为一个对象，每次调用该组件都会创建一个新的对象，相互之间并不会受到影响。

补充：
我们一般在创建vue实例的时候data值得定义

new Vue({
  el: '#app',
  components: { myCon },
  data：{
      mess: 'word1'
  }
})

其实我们也可以这样写

new Vue({
  el: '#app',
  components: { myCon },
  data() {
    return {
      mess: 'word1'
    }
  }
})