5-1 组件及组件间的通信-定义组件的方式

目录：

  • 什么是组件
  • 组件的定义方式

一、什么是组件？

　　组件(Compontent)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码，在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。Vue官方：组件基础

　　组件是自定义元素(对象)

二、定义组件的方式

2.1、先创建组件构造器，然后由组件构造器创建组件

Vue.extend( options )  //构造器

Vue.component( id, [definition] )   //组件构造器

用法：(第一种方式不怎么用，比较麻烦)

<body>
    <div id="box">
        <!--通过标签名(或叫ID)来引用组件-->
        <my-hello></my-hello>
    </div>
    <script type="text/javascript" src="../vue.js"></script>
    <script>
        /**
        * 方式1: 先创建组件构造器，然后由组件构造器创建组件()
        */
        //1、使用Vue.extend()创建一个组件构造器
        var MyComponent=Vue.extend({
            template:'<h3>hello world</h3>'
        });
        //2.使用Vue.component(标签名或叫ID,组件构造器),根据组件构造器来创建组件
        Vue.component('my-hello',MyComponent);//官方建议，组件名中间以 - 隔开

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

2.2、直接创建组件(推荐)

用法如下：

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

    <script type="text/javascript" src="../vue.js"></script>
    <script>
        /**
        * 方式2: 直接创建组件(推荐)
        */
        Vue.component('my-world',{  //组件命名标签名(或叫ID)的时候，建议使用 - 线
            template:'<h3>你好 世界</h3>'
        });
　　　　　//Vue实例也是一个组件，称为根组件ROOT
        new Vue({
            el: "#box"
        });
    </script>
</body>

注意： Vue实例也是一个组件，称为根组件ROOT，如图：

 

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