vue.js之组件那些事

注意：组件是vue.js的核心部分。组件必须得在实例化中的模板中使用。。如果选择注册一个全局组件，组件注册必须要在他的根实例化之前注册，一个组件可以对应多个根实例，根实例也可以对应多个组件。
关于组件的全局注册

（注意：组件的注册必须要在根实例化之前，否则会出错，而无法使用。）结合以下代码，实例#app就是my-test的根实例。。。

<!--app实例模板-->
<div id="app">
//(图一)看看下面两个分别在实例化前后注册的组件的显示情况
        <my-test></my-test>
        <!--<my-last></my-last>-->
    </div>
    <!--(图二)test实例模板-->
    <div id="test">
        <my-last></my-last>
        <my-test></my-test>
    </div>

<script>
    //1、在vue实例化之前组册组件my-test
    Vue.component('my-test',{
        template: '<h2>啊哈哈，我是新注册的组件呀！！</h2>'
    });
    //2、初始化一个实例
   var v = new Vue({     
        el: '#app'       
    })
    //3、如果在vue实例化之后注册一个组件my-last
    Vue.component('my-last',{
        template: '<h3>你说组件我能显示不？</h3>'
    });
    //4、另初始化一个实例，在my-last之后进行初始化
    let vm = new Vue({
        el: '#test'
    });
</script>

下面是代码效果图（从下可以看出，在实例化之后注册的组件my-last出错了。）

关于组件的局部注册

全局方式注册的组件，可以在其注册之后才初始化的所有实例模板内应用，但是有时候这并不是必须的，
有的其实只是为了在某个特定的实例模板中应用，在这种情况下，我们可以采用局部注册组件的方法。

<div id="test">    
    <my-second></my-second>
</div>

<script>
    let Child = {
        template: '<div>我只是一个局部注册的组件啦</div>'
    };
    let vm = new Vue({
        el: '#test',
        components: {
            'my-second': Child
        }
    });
</script>

当使用DOM作为模板时需要注意的事项
使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上时，

<table>、<tr>、<ul>、<ol>、<select>   这些元素对所包含的元素有限制,而<option>只能出现在特定的元素里面。。那么直接在里面应用组件可能会出现无法识别的情况，这时我们就可以使用is这个特殊的属性

<div id="test">
    <table>
        <tr>
            <td>hahah</td>
            <td is="my-second"></td>
            <my-second></my-second>
        </tr>
    </table>
</div>

let Child = {
        template: '<div>我只是一个局部注册的组件啦</div>'
    };
    let vm = new Vue({
        el: '#test',
        components: {
            'my-second': Child
        }
    });

注意：在实例中传入的各种选项大多也可以在组件中传入，唯一不同的就是data必须是函数。。。。