Vue-组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/codesWay/article/details/79456539

组件是Vue最强大的功能之一，那么到底什么是Vue组件呢？通俗点说就是一个自定义标签：

Vue组件的分类：全局组件（在任何Vue实例中均可以使用）和局部组件（只有在当前Vue实例中使用）；

全局组件的定义方式：

方式一： 创建组建构造器，然后再由组件构造器创建组件（不常用），例如：

//1.使用Vue.extened()方法创建组件构造器
                var myComponent = Vue.extend({
                    template:"<h3>我的第一个组件</h3>",
                })
                //2.使用Vue.component("组件名"，组件构造器)，根据组件构造器来创建组件,
                Vue.component("hello",myComponent);

方式二：直接创建组件，使用Vue.component("组件名"，{templa..等选项})；Vue组件名建议使用小写字母加“-”的方式

Vue.component("my-world", {
                    template: "<h3>{{name}}</h3>"//模板
                })

局部组件的定义方式：

只有一种定义方式,使用Vue实例中的components选项，例如：

var app1 = new Vue({
                    el: "#container1",
                    components: {//局部组件
                        "hi-world":{
                            template:'<h3>{{name}}</h3>',
                            data:function(){//在组件中存储数据的时候,必须以函数的形式,函数返回一个对象
                                return {//返回的也是一个对象
                                    name:"alice"
                                }
                            }
                        }
                    }
                })

自定义组件中的数据，其实Vue实例本身也是一个组件（根组件），其有一个data选项来存储数据，那么自定义组件有没有类似的选项呢，答案是有的，只不过和Vue实例的写法有些区别：

var app1 = new Vue({
                    el: "#container1",
                    components: {//局部组件
                        "hi-world":{
                            template:'<h3>{{name}}</h3>',
                            data:function(){//在组件中存储数据的时候,必须以函数的形式,函数返回一个对象
                                return {//返回的也是一个对象
                                    name:"alice"
                                }
                            }
                        }
                    }
                })

Vue组件的使用：既然说组建是一个自定义标签，那么他就应该以标签的方式来用，例如：

<div id="container">
            <hello></hello>
            <my-world></my-world>//
            <hi-world></hi-world>//<h3>alice</h3>
            <!-- 局部组件 -->
        </div>
        <div id="container1">
            <my-world></my-world>
             <hi-world></hi-world>   //<h3>alice</h3>
             <!-- 局部组件 -->
        </div>