Vue_(组件通讯)组件

　　Vue组件　　传送门

　　组件Component，可扩展HTML元素，封装可重用的代码。通俗的来说，组件将可重用的HTML元素封装成为标签方便复用；

　　组件的使用：

　　使用全局方法Vue.extend创建构造器；

　　再使用全局方法Vue.component注册组件；

　　在Vue.component里需要指明组件的名称，组件名称不能使用内置标签名称，如body

　　推荐使用短横线命名规则。例：

　　　　my-component 正确 (推荐)

　　　　my-Component 错误

　　　　mycomponent 正确

　　　　Mycomponent 正确

　　　　myComponent 错误

　　　　MyComponent 错误

　　Learn

　　　　一、组件注册

　　　　二、全局组件与局部组件

　　　　三、this is component-a

　　目录结构

　　【每个demo下方都存有html源码】

一、组件注册　　传送门

　　第一种方法：使用构造器注册组件

        <div id="GaryId">

            <!--<h1>hello Vue</h1>-->

            <my-component></my-component>

        </div>

            //创建构造器

            let myComponent =  Vue.extend({

                template:"<h1>hello Vue</h1>"

            })

            //注册组件

            Vue.component('my-component',myComponent);

　　第二种方法：组件的简写

        <div id="GaryId">

            <!--<h1>hello Vue</h1>-->

            <my-componenta></my-componenta>

        </div>

            //注册组件的简写

            Vue.component('my-componenta',{

                template:"<h2>hello Gary</h2>"

            })

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Gary</title>

    </head>

    <body>

        <div id="GaryId">

            <!--<h1>hello Vue</h1>-->

            <my-component></my-component>

            <my-componenta></my-componenta>

        </div>

    </body>

    <script type="text/javascript" src="../js/vue.js" ></script>

    <script type="text/javascript">

            //创建构造器

            let myComponent =  Vue.extend({

                template:"<h1>hello Vue</h1>"

            })

            //注册组件

            Vue.component('my-component',myComponent);

            //注册组件的简写

            Vue.component('my-componenta',{

                template:"<h2>hello Gary</h2>"

            })

            new Vue({

                data:{

                    msg:'Gary'

                }

            }).$mount("#GaryId");

    </script>

</html>

Gary_component.html

二、全局组件与局部组件　　传送门

　　组件可分为全局组件与局部组件；

　　全局组件：

　　　　在全局API中的Vue.component注册

　　　　该项目中所有Vue实例内均可以使用

　　局部组件：

　　　　在Vue实例中的components选项中注册

　　　　只能在本实例中使用

　　全局组件和局部组件都可以存储数据，但是存储的方式与Vue实例中的data稍有不同；

　　组件里存储数据，data后需加上函数，数据写在函数体中

　　this is component-a作为局部属性使用

局部组件：只可以再div id="GaryId"中使用

        <div id="GaryId">

            <my-component-a></my-component-a>

        </div>

            new Vue({

                data:{

                    msg:'Gary'

                },

                components:{

                    "my-component-a":{

                        template:"<h2>this is component-a</h2>"

                    }

                }

            }).$mount("#GaryId");

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Gary</title>

    </head>

    <body>

        <div id="GaryId">

            <my-component-a></my-component-a>

        </div>

    </body>

    <script type="text/javascript" src="../js/vue.js" ></script>

    <script type="text/javascript">

            new Vue({

                data:{

                    msg:'Gary'

                },

                components:{

                    "my-component-a":{

                        template:"<h2>this is component-a</h2>"

                    }

                }

            }).$mount("#GaryId");

    </script>

</html>

Gary_component-02.html

全局属性：可以在任意div中调用

        <div id="GaryId">

            <my-component-a></my-component-a>

            <my-component-b></my-component-b>

        </div>

            //注册组件的简写(默认全局)

            Vue.component('my-component-b',{

                template:"<h2>{{name}}</h2>",

                data:function(){

                    return {

                        name:'this is component-b'

                    }

                }

            })

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Gary</title>

    </head>

    <body>

        <div id="GaryId">

            <my-component-a></my-component-a>

            <my-component-b></my-component-b>

        </div>

    </body>

    <script type="text/javascript" src="../js/vue.js" ></script>

    <script type="text/javascript">

            //注册组件的简写(默认全局)

            Vue.component('my-component-b',{

                template:"<h2>{{name}}</h2>",

                data:function(){

                    return {

                        name:'this is component-b'

                    }

                }

            })

            new Vue({

                data:{

                    msg:'Gary'

                },

                components:{

                    "my-component-a":{

                        template:"<h2>this is component-a</h2>"

                    }

                }

            }).$mount("#GaryId");

    </script>

</html>

Gary_component-02.html

三、this is component-a

　　在component的template中书写大量的HTML元素很麻烦

　　Vue提供了<template>标签，可以在里边书写HTML，然后通过ID指定到组建内的template属性上；

　　<body>标签中调用组件

        <div id="GaryId">

            <my-component-b></my-component-b>

        </div>

　　在<template>标签中通过id"my-template"添加组件

        <template id="my-template">

        <div>

            <h2>{{name}}</h2>

            <button @click="count++">{{count}}</button>

            <ul>

                <li v-for="item in numArray">{{item}}</li>

            </ul>

        </div>

    </template>

new Vue({

            data : {

                msg : '123'

            },

            components : {

                "my-component-b" : {

                    template :  "#my-template",

                    data(){

                        return {

                            name : "my-component-b !!",

                            numArray : [1, 2, 3, 4, 5],

                            count : 0

                        }

                    }

                }

            }

            }).$mount("#GaryId");

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Gary</title>

    </head>

    <body>

        <div id="GaryId">

            <my-component-b></my-component-b>

        </div>

    </body>

        <template id="my-template">

        <div>

            <h2>{{name}}</h2>

            <button @click="count++">{{count}}</button>

            <ul>

                <li v-for="item in numArray">{{item}}</li>

            </ul>

        </div>

    </template>

    <script type="text/javascript" src="../js/vue.js" ></script>

    <script type="text/javascript">

        new Vue({

            data : {

                msg : '123'

            },

            components : {

                "my-component-b" : {

                    template :  "#my-template",

                    data(){

                        return {

                            name : "my-component-b !!",

                            numArray : [1, 2, 3, 4, 5],

                            count : 0

                        }

                    }

                }

            }

            }).$mount("#GaryId");

    </script>

</html>

Gary_component-03.html

巴特西

Vue_(组件通讯)组件

三、this is component-a

最新文章

热门文章