一、组件概述

1.什么是组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

二、组件定义

1、组件定义步骤

组件定义2步骤：
a、创建组件构造器
Vue.extend()定义要渲染的HTML

b、注册组件
Vue.component()定义组件名和构造器

调用Vue.extend()创建的是一个组件构造器，构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML；

调用Vue.component()注册组件时，需要提供2个参数：组件的标签名和组件构造器；注册的组件要挂载到某个Vue实例下，否则它不会生效；

Vue.extend() 和 Vue.component()：由于 Vue 本身是一个构造函数，Vue.extend() 是一个类继承方法，它用来创建一个 Vue 的子类并返回其构造函数; 而Vue.component() 的作用在于：建立指定的构造函数与 ID 字符串间的关系，从而让 Vue.js 能在模板中使用它；直接向 Vue.component() 传递 options 时，它会在内部调用 Vue.extend()。

2、全局组件

全局组件定义2个步骤：
// 1.创建组件构造器
　　let Profile = Vue.extend({
// 1.1 模板选项
　　template: `
　　　　<div>
　　　　<input type="date">
　　　　<p>今天已经是冬天了!</p>
　　　　</div>
　　　　`
　});

// 2. 注册一个全局的组件，任何实例都可以使用它
　　Vue.component('my-date', Profile);
全局组件可以直接在每一个vue实例中使用。

3、局部组件

// 1.创建组件构造器
　　let Profile = Vue.extend({
// 1.1 模板选项
　　template: `
　　　　<div>
　　　　<input type="date">
　　　　<p>今天已经是冬天了!</p>
　　　　</div>
　　　　`
　　});
//2、注册到一个指定的Vue实例中，这样就只能在某一个实例中使用这个组件了
　　new Vue({
　　　　el: '#app',
//通过注册到特定的实例，来达到局部应用，本例中只能应用在id=app的实例中
　　　　components: {
　　　　　　'my-date': Profile,
　　　　}
　　　　});

注意：

全局组件需要单独注册；
局部组件必须注册到特定的实例中，以components属性的方式；

三、父子组件

// 1. 子组件构造器
        let Child1 = Vue.extend({
            template: `<img src="img/img_01.jpg" width="200">`
        });
let Child2 = Vue.extend({
            template: `<p>我认为自己很美!</p>`
        });
//如果想单独使用子组件，必须单独注册。这样就可以作为一个单独的全局组件使用。
Vue.component('child', Child1);

// 2. 父组件构造器
        Vue.component('parent', {
            components: {
                'my-child1': Child1,
                'my-child2': Child2
            },
            template:
                `
                  <div>
                      <my-child1></my-child1>
                      <my-child2></my-child2>
                  </div>
                `
        });
//3、使用
<div id="app">
        <parent></parent>
　　　　//child为全局组件，可以单独使用！
        <child></child>
    </div>

四、组件简化

1、template方式简化

<body>
    <div id="app">
        <my-div></my-div>
    </div>

    <template id="my_div">
　　　　//template里面只能有一个根，也就是所有内容都包含在一个div里面！
        <div>
            <div>我是MT!</div>
            <input type="date">
            <img src="img/img_02.jpg" alt="" width="400">
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>

        // 1. 实例化组件
        Vue.component('my-div', {
            template: '#my_div'
        });

        new Vue({
           el: '#app',
        });
    </script>
</body>

2、script方式简化

<body>
    <div id="app">
        <my-div></my-div>
    </div>

    <script type="text/x-template" id="my_div">
        <div>
            <img src="img/img_02.jpg" alt="" width="200">
            <p>我是花姑娘!</p>
        </div>
    </script>

    <script src="js/vue.js"></script>
    <script>

        // 1. 实例化组件
        Vue.component('my-div', {
            template: '#my_div'
        });

        new Vue({
           el: '#app',
        });
    </script>
</body>

注意事项：

 1. 组件挂载数据必须是函数，返回一个对象

 Vue.component('my-btn', {
            template: '#my_btn',
            data(){
                return {
                    counter: 0
                }
            }
        });

　组件挂载数据，必须是一个函数，且返回一个对象，这样子组件被任何对象引用时，data就互不干涉，都是一个独立的对象，可以随时修改，数据都互不影响。　

2、组件的template中，必须包含在一个根下面

<template id="my_div">
　　　　//template里面只能有一个根，也就是所有内容都包含在一个div里面！
        <div>
            <div>我是MT!</div>
            <input type="date">
            <img src="img/img_02.jpg" alt="" width="400">
        </div>
    </template>



<template id="my_div">    
       //这是错误的，不能有多个根元素！
            <div>我是MT!</div>
            <input type="date">
            <img src="img/img_02.jpg" alt="" width="400">
    </template>

五、组件间通讯

1、单层通讯

a、父子通信
<body>
    <div id="app">
     //第三步、父组件给子组件传值，单层传值无需动态绑定。父子传值，让子组件更活起来！
        <my-div message="今天要下雨" imgsrc="img/img_02.jpg"></my-div>
        <my-div message="明天要下冰雹" imgsrc="img/img_01.jpg"></my-div>
    </div>

    <template id="my_div">
　　//第一步：子组件定义接受的值
        <div>
            <h1>{{message}}</h1>
            <img :src="imgsrc" width="200" alt="">
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        // 1. 创建组件，
　　//第二步、通过props定义从父组件能够接受的值
        Vue.component('my-div', {
            template: '#my_div',
            props: ['message', 'imgsrc']//注意，要支持驼峰式imgSrc的写法，需要在template和父组件里面修改成img-src或img-Src。
        });

        new Vue({
           el: '#app',
            data: {
               msg: '今天的天气很好!'
            }
        });
    </script>
</body>

2、多层通讯

<body>
//4、祖父组件使用和传值
<div id="app">
    <my-parent :imgtitle="title" :imgsrc="img"></my-parent>
</div>

<template id="my_img">
    <img :src="imgsrc" width="200">
</template>

<template id="my_title">
    <h2>{{title}}</h2>
</template>

//3、父组件定义和传值
<template id="my_parent">
    <div>
        <child1 :childimg="imgsrc"></child1>
        <child2 :childtitle="imgtitle"></child2>
    </div>
</template>

<script src="js/vue.js"></script>
<script>

    // 1. 子组件的实例
    let Child1 = Vue.extend({
        template: '#my_img',
        props: ['childmyimg']  #父组件传递属性
    });

    let Child2 = Vue.extend({
        template: '#my_title',
        props: ['childtitle']
    });

    // 2. 子组件注册到父组件
    Vue.component('my-parent', {
        props: ['imgtitle', 'imgsrc'],  #曾祖父传递的属性
        components: {
            'child1': Child1,
            'child2': Child2
        },
        template: '#my_parent'
    });

    new Vue({
        el: '#app',
        data: {
            title: '我是不是很漂亮',
            img: 'img/img_01.jpg'
        }
    });
</script>
</body>

祖父组件=>父组件=>子组件，注意事项：
1、多层传值必须是动态绑定的方式：
2、相对子组件必须通过props属性接受父组件传过来的数据

六、自定义事件

子组件通知给外界，他执行了什么操作，此时，外界会做出相应的操作。
<body>
    <div id="app">
       <!--父组件通过on监听total事件，一旦执行total事件，则会修改Vue实例中的数据，这样就达到了在父组件中多次调用子组件，数据都是独立的-->
        <my-btn @total="allcounter()"></my-btn>
        <my-btn @total="allcounter()"></my-btn>
        <my-btn @total="allcounter()"></my-btn>
        <my-btn @total="allcounter()"></my-btn>
        <my-btn @total="allcounter()"></my-btn>
        <my-btn @total="allcounter()"></my-btn>
        <my-btn @total="allcounter()"></my-btn>

        <p>所有按钮一共点击了{{totalCounter}}次</p>
    </div>

    <template id="my_btn">
         <button @click="total()">点击了{{counter}}次</button>
    </template>

    <script src="js/vue.js"></script>
    <script>
//定义子组件
        Vue.component('my-btn', {
            template: '#my_btn',
            data(){
                return { 
                    counter: 0  //注意：在子组件中挂载数据，必须返回对象，这样在任何地方调用子组件都是独立的，数据互不干涉。
                }
            },
            methods: {
                total(){
                    this.counter += 1;

                    // 通知外界,我触发了total方法，然后他就会调用后面的allcounter()，这样就把所有的点击次数加起来了
                    this.$emit('total');
                }
            }
        });

        new Vue({
           el: '#app',
            data: {
                totalCounter: 0
            },
            methods: {
               allcounter(){
                   this.totalCounter += 1;
               }
            }
        });
    </script>
</body>

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

七、插槽slot

slot的意思是插槽，其目的在于让组件的可扩展性更强。打个比方说：假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的。

注意：如果使用子组件时，在里面添加DOM，默认这些Dom是不会显示的，因为子组件根本不认识。例如：

<child><div>我想在子组件中显示，但是显示不出来</div></child>

插槽就像电路板，是用来方便插入内容的。slot分为匿名插槽和具名插槽。
匿名插槽就像公交车，谁都可以上，任何人都可以使用这个插槽，很类似娱乐圈中的女明星啦；
具名插槽则是私家车，一个人对应一辆车，一个内容对应一个插槽，这个就是生活中的良家妇女啦。

1、匿名插槽

<body>
    <div id="app">
        <my-slot>
            <!--date会覆盖默认的插槽-->
            <input type="date">
        </my-slot>
    </div>

    <template id="my_slot">
        <div id="panel">
            <h2 class="panel-header">插槽的头部</h2>
            <!--预留一个插槽-->
            <slot>可以替换任何标签,默认显示提示的内容</slot>
            <footer>插槽的尾部</footer>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        Vue.component('my-slot', {
            template: '#my_slot'
        });

        new Vue({
           el: '#app',
            data: {
               msg: '今天的天气很好!'
            }
        });
    </script>
</body>

2、具名插槽

<body>
    <div id="app">
        <my-computer>
 		<!--只能根据slot的name插入对应的数据-->
            <div slot="cpu">Inter Core i8</div>
            <img slot="gpu" src="img/img_02.jpg" width="100" alt="">
            <div slot="memory">128G</div>
            <input type="color" slot="hard-drive">
        </my-computer>
    </div>

    <template id="my_computer">
        <div id="main">
            <slot name="cpu">这里是插cpu的</slot>
            <slot name="gpu">这里是插gpu的</slot>
            <slot name="memory">这里是插内存条的</slot>
            <slot name="hard-drive">这里是插硬盘的</slot>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        Vue.component('my-computer', {
            template: '#my_computer'
        });

        new Vue({
           el: '#app',
            data: {
               msg: '今天的天气很好!'
            }
        });
    </script>
</body>

八、综合案例

组件以及父子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <div>
        <input type="text" v-model="inputValue">
        <button @click="handleClickBtn">添加</button>
    </div>
    <ul>
        <todo-item
                v-for="(item,index) in list"
                :content="item"
                :key="item"
                :index="index"
                :msg="msg"
                @delete="handleParentDelete"
        >
            {{item}}

        </todo-item>
    </ul>
</div>

<script src="js/vue.js"></script>
<script>
    //定义全局组件todoItem
    var todoItem = {
        //子组件接受来自父组件的传值，可以直接使用
        props: ['content', 'index', 'msg'],
        template: "<li @click='handleItemDelete'>{{content}}-{{msg}}</li>",
        methods: {
            handleItemDelete: function () {
                //当点击子组件时，会向外触发delete事件，同时带上对应的参数，父组件监听到delete被触发后，则会执行对应的方法
                this.$emit('delete', this.index)
            }
        },
    }
    // 1. 创建Vue的实例
    let vm = new Vue({
        el: '#app',
        data: {
            list:[],
            inputValue:'',
            msg:'我是来自父组件的msg'
        },
        components:{
            //全局组件注册到vm实例中
            todoItem
        },
        methods:{
            handleClickBtn:function(){
                if(this.inputValue){
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                }else{
                    alert('输入内容不能为空！');
                }
            },
            handleParentDelete:function(id){
                //$emit传给父组件的参数，在这里接受。
                alert(id);
                this.list.splice(id,1);
            },

        }
    });
</script>
</body>
</html>

VUE的组件其实也是一个Vue实例，她具备vue的所有属性和方法。

九、组件的注意事项

1、is属性

解决h5的一些小bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <table>
        <tbody>
            //tbody标签直接使用row会在h5中有问题，解析后会跳到table外面去
            <row></row>
            <row></row>
            <row></row>
            //修改为：
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
            //ul标签里面需要使用li,select标签中需要使用option
        </tbody>
    </table>
</div>

    <script src="js/vue.js"></script>
    <script>

        Vue.component('row',{
            template:'<tr><td>this is a row</td></tr>'
        })

        // 1. 创建Vue的实例
        let vm = new Vue({


        });
    </script>
    </body>
    </html>

2、子组件的data

组件中的data必须是一个函数，返回一个对象

        data:function(){
                return {
                    number:0
                }
            },

3、ref使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <div>{{total}}</div>
    </div>

    <script src="js/vue.js"></script>
    <script>

        Vue.component('counter',{
            template:'<div @click="handleClick">{{number}}</div>',
            data:function(){
                return {
                    number:0
                }
            },
            methods:{
                handleClick:function(){
                    this.number++
                    this.$emit('change')
                }
            }

        })

        // 1. 创建Vue的实例
        let vm = new Vue({
            el:'#app',
            data:{
                total:0
            },
            methods:{
                handleChange:function () {
                    this.total = this.$refs.one.number + this.$refs.two.number
                }
            }

        });
    </script>
    </body>
    </html>

4、父子传值

父组件传值给子组件，子组件最好不要修改父组件的数据，因为加入父组件传递的是一个对象，可能被多个子组件反复的修改，导致数据混乱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <div id="app">
       <counter :count='1' @change='handleChange'></counter>
       <counter :count='2' @change='handleChange'></counter>
       <span>{{total}}</span>
   </div>

<script src="js/vue.js"></script>
<script>
    var counter={
      props:['count'],
      template:"<div @click='handleClick'>{{number}}</div>",
      data:function(){
        return {
          //拷贝一个父本出来
          number:this.count
        }
      },
      methods:{
        handleClick:function(){
          //注意：避免直接修改父组件传过来的数据
          //this.count++

          //每次步长为1
          this.number += 1
          //每次子组件被点击后都告知父组件触发对应的事件
          this.$emit('change',1)
        }
      }
    }
    // 1. 创建Vue的实例
    let vm = new Vue({
        el: '#app',
        components:{
          counter
        },
        data:{
          total:3
        },
        methods:{
          handleChange:function(num){

            this.total+=num
          }
        }

    });
</script>
</body>
</html>

5、props和非props特性

子组件对父组件传过来的数据进行约束检测，则为props特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <child content="hello world"></child>
    </div>

    <script src="js/vue.js"></script>
    <script>

        Vue.component('child',{
            props:{
                content:{
                    type:String,
                    required:false,
                    default:'default value',
                    validator:function (value) {
                        return (value.length>5)
                    }
                }
            },
            template:'<div>{{content}}</div>',

        })

        // 1. 创建Vue的实例
        let vm = new Vue({
            el:'#app',

        });
    </script>
    </body>
    </html>

props特点：

1、父组件传递过来
2、子组件必须验证
3、子组件可以使用
4、不会渲染在子组件中

父组件向子组件传递数据，但是在子组件没有明确接受，则不能通过{{}}使用，也称之为非props

非props特点：

1、父组件传递过来
2、子组件没明确写在props里面接受
3、子组件不能通过{{}}使用
4、会渲染在子组件当中，比如上面的content='hello wold‘会在子组件元素的html属性中渲染’。

6、给组件绑定原生事件

正常情况下，在父组件中绑定事件，我们只能在子组件通过this.$emit('events')进行触发后执行：

<child @click='handleClick'></child>
如果需要在父组件中也生效，需要通过给父组件绑定原生事件：

<child @click.native='handleClick'></child>
完整示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <div id="app">
      <child @click.native='handleClick'></child>
   </div>

<script src="js/vue.js"></script>
<script>
    Vue.component('child',{
      template:'<div>Child</div>',

    })
    // 1. 创建Vue的实例
    let vm = new Vue({
        el: '#app',
        methods:{
          handleClick:function(){
            alert('aaa')
          }
        }

    });
</script>
</body>
</html>

Vue组件