Vue的组件

组件，也就是一个标签，只不过这个标签是自定义的而已，它的注册方式分为全局和局部两种

组件注册方式

全局组件注册方式

这种方式利用的Vue.component

    <h3>全局组件：</h3>    <div id="app">        <panda></panda>    </div>    <script type="text/javascript">        Vue.component('panda', {            template:'<p>全局 panda</p>'        });        new Vue({            el : "#app"        });    </script>

在上面的代码后面加上这么一些附加代码:

    <!--附加代码-->    <div id="test">        <panda></panda>    </div>    <script type="text/javascript">        new Vue({            el: "#test"        })    </script>

结果如下：

局部注册方式

利用的是构造器里面的components

    <h3>局部组件：</h3>    <div id="app1">        <div-panda></div-panda>    </div>    <script type="text/javascript">        new Vue({            el : "#app1",            components: {                'div-panda' : {                    template: "<p>局部 panda</p>"                }            }        })    </script>

在上面的结果“全局注册”的附加代码，结果如下

所以说呢，全局注册和局部注册的作用域是不同的，根据需要灵活选择

组件中的props

如下面的代码：

    <h3>props的用法</h3>    <div id="app3">        <atree here="Beijing"></atree>    </div>    <script type="text/javascript">        new Vue({            el: "#app3",            data : {                message: "xi'an"            },            components: {                "atree" : {                    template: '<div>there is {{here}}</div>',                    props: ['here']                }            }        })    </script>

分析上面的代码：在上面的组件的模板中，含有一个here这个变量，props中也包含着here，在html中也包含here并且给它赋了值，当你运行这段代码的时候，确实显示的值就是html中的here的值，也就说明了这似乎就是一种可以传递信息的方式，组件的props属性说明，我需要怎样的值，然后在html中，给组件所需要的值，其实这不就是“通信”吗？

props对应的数组中的字符串是不能包含“-”连接符号的，而是应该写成驼峰的样子

组件使用data值

同样先看这样一段代码：

    <h3>props与data的搭配使用</h3>    <div id="app4">        <btree v-bind:location="message" here="Beijing"></btree>    </div>    <script type="text/javascript">        new Vue({           el : "#app4",            data : {              message: "xi'an"            },            components: {                'btree': {                    template: "<div>there is {{location}}</div>",                    props: ['location']                }            }        });    </script>

重点就在这里v-bind:location="message"，在这里使用了Vue的v-bind指令，绑定了location这个属性，并且它的值来源于data里面的message，也就是实现了 动态地绑定父组件的数据到子模板的props

使用Component动态绑定组件

这里要用到的就是is，如下面的代码所示：

    <h3>component动态绑定组件</h3>    <div id="app6">        <comment v-bind:is="who">        </comment>        <button v-on:click="change">change component</button>    </div>    <script type="text/javascript">        var componentA = {            template : "<p>this is component A</p>"        };        var componentB = {            template : "<p>this is component B</p>"        };        var componentC = {            template : "<p>this is component C</p>"        };        new Vue({            el : "#app6",            data : {                who: 'componentA'            },            components: {                "componentA" : componentA,                "componentB" : componentB,                "componentC" : componentC            },            methods : {                change: function() {                    if(this.who == 'componentA') {                        this.who = 'componentB';                    }else if(this.who == 'componentB') {                        this.who = 'componentC';                    }else {                        this.who = 'componentA';                    }                }            }        })

上面的代码实现的就是，初始的时候绑定的是组件A，通过的是is，让它等于data中的who，当点击按钮之后，会执行相应的方法，也就是动态改变who的值，从而切换不同的组件

组件间的通讯

这部分请参考，组件之间的通信