Vue组件

组件

    作用
        1. 组件是vue的一个重要的特点
        2. 实现多人协作开发
        3. 通过组件划分降低开发的难度
        4. 实现复用，降低重复劳动
    组件解释
        组件就是定义好的一功能模块
        建议：多用props，少在组件中使用data（降低组件的耦合性，提高复用性）
    定义与使用
        1. 定义
        注意:template有且只有一个根节点
                 const steper = {
                           template:`<span></span>`
                               }
        2. 在父组件中注册
                      components:{steper:stepter}
        3. 在组件的模板中使用
               <steper></steper>
          ⭐  传参
        父传子
            父
                <modal :visible="visible">
            子
                    props:{
                           visible:{type:Boolean,default:false}
                        }
            子使用
                注意：vue是单向数据流，父组件传递给子组件的props是只读（不能修改）
                this.visible
        子传父
            子
                        this.$emit("update:visible",false)
            父
                        监听事件，修改值
                        <modal @update:visible="visible=$event">
            插槽
        插槽：组件的嵌套内容
                父
                        <modal>
                                 <input />
                                   <button>确定</button>
                        </modal>
        子组件 模板中使用
                        template:    `<div><slot></slot></div>`