Vue-Vue组件的注册和使用

全局注册：

要注册一个全局组件，可以使用 Vue.component(tagName, options)。

注意确保在初始化根实例之前注册组件：

html代码：

<div id="example">
  <my-component></my-component>
</div>

JS代码：

// 注册
Vue.component('my-component', {
  template: '
A custom component!
'
})

// 创建根实例
new Vue({
  el: '#example'
})

渲染为：

<div id="example">
  <div>A custom component!</div>
</div>

局部注册：

不必把每个组件都注册到全局。可以通过某个 Vue 实例/组件的实例选项 components注册仅在其作用域中可用的组件：

var Child = {
  template: '
A custom component!
'
}

new Vue({
  // ...
  components: {
    //  将只在父组件模板中可用
    'my-component': Child
  }
})

注意点：
　　一：DOM 模板解析注意事项

当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像

<table>
  <my-row>...</my-row>
</table>

自定义组件 会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：

<table>
  <tr is="my-row"></tr>
</table>

二、data 必须是函数

var Child={
        template:'
{{msg}}
',
        data:{
             msg:'lizhao'
        }
    }

当data时对象格式时，Vue 会停止运行，并在控制台发出警告，告诉你在组件实例中 data 必须是一个函数。因为组件实例共享同一个 data 对象，修改一个变量会影响所有组件！我们可以通过为每个组件返回全新的数据对象来修复这个问题：

var Child={
        template:'
{{msg}}
',
        data:function(){
            return{
                 msg:'lizhao'
            } 
        }
    }