Vue-Vue组件的注册和使用

全局注册：

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

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

html代码：

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

JS代码：

// 注册
Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 建立根实例
new Vue({ el: '#example' })

渲染为：

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

局部注册：

　　没必要把每一个组件都注册到全局。能够经过某个 Vue 实例/组件的实例选项 注册仅在其做用域中可用的组件：components

var Child = { template: '<div>A custom component!</div>' } new Vue({ // ...
 components: { // <my-component> 将只在父组件模板中可用
    'my-component': Child } })

注意点：

　　一：DOM 模板解析注意事项

　　当使用 DOM 做为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 自己的一些限制，由于 Vue 只有在浏览器解析、规范化模板以后才能获取其内容。尤为要注意，像 <ul>、<ol>、<table>、<select> 这样的元素里容许包含的元素有限制，而另外一些像 <option> 这样的元素只能出如今某些特定元素的内部。在自定义组件中使用这些受限制的元素时会致使一些问题，例如：

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

    自定义组件  会被看成无效的内容，所以会致使错误的渲染结果。变通的方案是使用特殊的  特性：<my-row>is

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

　　2、data 必须是函数

var Child={ template:'<p>{{msg}}</p>', data:{ msg:'lizhao' } }

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

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