vue2 自定义组件

1st.定义自定义组件

    自定义组件是解决代码复用问题的方法，封装自定义组件可以使得在处理许多相似业务时更方便快捷的编写代码。

1.1.局部定义方法：

    局部就是只能在一个vue实例中使用，定义方法是使用components对象编写自定义组件：

new Vue({

            el: '#app',

            data: {

            },

            components: {

                "b-box": {

                    template: `

                                                Hello {{ name }}

                                    

`,

                    data(){

                                return {

                                              name:"张三"

                        }

                },

            }

        })

    注：1.在components对象中，属性名即为自定义组件的名称，之后使用自定义组件也是使用这个属性名的标签，注意，因为html中标签不区分大小写，而这里的属性名是要在html中使用的，所以命名不能使用大写字母，应使用全小写加连字符-来连接代替驼峰式命名法。

            2.每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，要使用组件的模板template来写组件在使用时要渲染的内容，而且模板中要有一个根标签

            3.data属性不能使用对象来写，要使用方法的返回对象来写。

1.2.全局定义方法：

    在全局定义的自定义组件可以在页面中所有的vue实例中使用。在定义时使用Vue.component方法：

Vue.component( "b-box",{

                    template: `

                                                Hello{{ name }}

                                    

`,

                                  data(){

                                            return {

                                                        name:"张三"

                                                       }

                                            }

})

    

2nd.使用自定义组件

    使用自定义组件只要在html中使用自定义组件名称的标签即可，与普通标签一样，可以使用通用的vue语法如 v-for v-if 等

3rd.自定义属性

    自定义组件是灵活的，它需要渲染的值也可以让vue实例通过自定义属性的方法传给内部。自定义属性的定义使用 props 来定义：

props简写：

 Vue.component("b-box", {

            template: `

                            Hello{{ name }}

                            

{{value1}}

                            

{{value2}}