5-2 组件及组件间的通信-组件的分类

目录：

  • 全局组件
  • 局部组件
  • 组件绑定数据

一、全局组件

全局组件，可以在所有的Vue实例中使用，定义方式已经在上一节我们讲过了，我们这边再稍微提示一下吧。

<body>
    <div id="box">
        <!--通过标签名(或叫组件名)来引用组件-->
        <my-hello></my-hello>
    </div>
    <script type="text/javascript" src="../vue.js"></script>
    <script>
        /**
        * 全局组件，可以在所有Vue实例中使用
        */
        Vue.component('my-hello',{
            template:'<h3>{{name}}</h3>',
            data(){ //在组件中存储数据时，必须要以函数形式，函数返回一个对象
                return {
                    name:"shuaigaogao"
                }
            }
        });

        new Vue({
            el: "#box"
        });
    </script>
</body>

二、局部组件

在Vue中，给局部组件提供了一个选项，即：components选项

<body>
    <div id="box">
        <!--通过标签名(或叫ID)来引用组件-->
        <my-world></my-world>
    </div>

    <script type="text/javascript" src="../vue.js"></script>
    <script>
        /**
        * 局部组件，只能在当前vue实例中使用
        */
        new Vue({
            el: "#box",
            components:{//局部组件
                "my-world":{ //my-world是标签名
                    template: "<h3>{{title}}-{{age}}</h3>",
                    data(){
                        return {
                            title: "欢迎来到帅高高博客园",
                            age: 22
                        }
                    }
                }
            }
        });
    </script>
</body>

三、组件绑定数据

在组件中存储数据时，必须要以函数形式，函数返回一个对象，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {  //简写 data(){}
  return {
    count: 0
  }
}

具体事例，根据上面的全局和局部组件用法里面都有。

 

posted @ 2020-03-11 16:59  帅丶高高  阅读(188)  评论(0)    收藏  举报