自定义组件、全局和局部组件、组件之间的传值、插槽以及动态组件

一、自定义组件

组件是你能够拿来用的那些标签、方法等都可以叫做组件。
例如：h5标签可以说是系统自带的一个组件，html内置的组件。

那么如何用vue实现一个自定义组件呢？以下是实现过程：
1、首先定义一个组件：
其中：
（1）template表示当前组件显示的模板内容，
txt会在template这里模板html中显示
（2）

		//定义一个组件
        const Button = {
            //组件的模板html 
            template:`<div class="btn">{
  {txt}}</div>`, //template表示当前组件显示的模板内容
            //txt会在template这里模板html中显示
            props:['txt'],//txt属性 调用组件的时候传递过来
        };

2、注册组件：

		const app = new Vue({
            el:'#app',
            //通过components注册组件
            components:{
                btn:Button,
                //btn是在使用这个组件的时候的属性名 
           		//Button是上面定义组件时定义的那个变量
            }
        })

3、使用这个组件

	<div id="app">
        <btn txt="按钮"></btn>
        <btn txt="登录"></btn>
    </div>

css样式：

	.btn {
        background-color: deeppink;
        color: #fff;
        padding: 0.5rem;
        width: 80px;
        text-align: center;
        cursor: pointer;
        border-radius: 0.3rem;
        margin: 0.2rem;
      }
      .btn.danger {
        background-color: red;
      }
      .btn.info {
        background-color: greenyellow;
      }

例子： 下面再定义一个计数器的组件，同上：

1、定义组件：

		const Counter = {
            template:`<div class="counter">
                    <button @click="count += 1">计数-{
  {count}}</button>
                </div>`,
            //组件中的data必须是一个function，其返回一个对象作为组件的数据
            data(){
                return {
                    count:1,
                };
            }
        }

2、注册组件：

 		const app = new Vue({
            el:'#app',
            //注册组件
            components:{
                //组件在页面中使用的名字；组件对象
                btn:Button,
                //btn是在使用这个组件的时候的属性名 
                //Button是上面定义组件时定义的那个变量
                counter:Counter,
            }
        })

3、使用组件：

	<div id="app">
        <btn txt="按钮" type="danger"></btn>
        <btn txt="登录" ></btn>
        <counter></counter>
    </div>

结果如下：

若想再给计数换个刚刚自定义按钮，则可以写成如下形式：
其中还要在Counter里面再次进行注册

			const Counter = {
            template:`<div class="counter">
                    <button @click="count += 1">计数-{
  {count}}</button>
                   <btn txt="计数" @btn-click="clickHandle()"></btn>
                    </div>`,
            //组件中的data必须是一个function，其返回一个对象作为组件的数据
            data(){
                return {
                    count:1,
                };
            },
            //组件可以嵌套，在使用局部组件的时候需要进行注册
            components:{
                btn:Button,
            }
        }

总代码：

在定义的Button组件template中加了@click=“clickHandle”，并添加methods的clickHandle方法

//往外派发一个自定义事件btn-click,所有使用组件的父组件可以进行事件监听
this.$emit(‘btn-click’)

在定义的Counter组件template中加了@btn-click="clickHandle()，并添加methods的clickHandle方法

//此处的btn-click是属于组件的自定义事件，自定义事件需要使用$emit进行触发

总结：首先{<div @click=“clickHandle” class=“btn” :class=“type”>{ {txt}}}定义了一个自定义button按钮，这个button其实就是一个div，div里有个文本内容，当点击这个div之后，类似于触发了一个click事件，这个click事件又向外派发了一个自定义事件，这个Counter组件监听一下这个自定义事件之后触发它的clickHandle函数。

</div>

<script src="./libs/vue.js"></script>
<script>
    //定义一个组件
    const Button = {
        //组件的模板html 
        template