VUE2 组件

一、全局组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

组件其实也是一个 vue 的实例，包含 data 、 computed 、 methods 等属性，也包含了完整的生命周期函数。因此，使用组件化其实就是多个 vue 的实例的组合和相互作用。

1. 全局注册

全局组件不需要在 vue 实例里面注册可以直接使用

注册全局组件的代码必须写在 vue 实例化之前。
组件命名要注意，如果是小驼峰法，在 html 调用时不识别大小写，要改成横杠写法。
组件内部的 data 必须是函数。

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

Vue.component("my-component", {
  // 选项
  template: "<div>{{msg}}</div>",
  data() {
    return {
      msg: "BGG神教，一统江湖"
    };
  }
});
var app = new Vue({
  el: "#app",
  data: {}
});

二、局部组件

要清楚组件的性质,可以认为一个组件就是一个 vue 实例。

1. 局部注册

局部组件被正确调用，必须在 vue 实例里面注册。
html 不识别大小写，调用时横杠写法命名。
命名不要用系统标签名，例如：header，footer 等。
组件绑定 is 属性可以实现动态组件。

<div id="app">
  <child></child>
</div>

var child = {
    // 选项
    template："<div>{{msg}}</div>",
    data(){
        return {
             msg:"BGG神教，一统江湖" ,
        }
     }
}

new Vue({
    el:"#app",
    components:{//必须注册
        child,
    },
})

使用 `is` 属性实现动态组件,选项卡切换效果

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

这个自定义组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>
  <tr is="blog-post-row"></tr>
</table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

字符串 (例如：template: '...')
单文件组件 (.vue)
<script type="text/x-template">

# VUE2 组件

# 一、 全局组件

# 1. 全局注册

# 二、 局部组件