vue脚手架 笔记01

01 页面组件

        所谓的组件就是把页面每一块内容单独分离出去封装起来

        组件包括自己本身的html css 和 js

        可以被反复引入使用 (复用)

        方便后期维护(方便快速的增加或者删除指定页面的指定模块)

        组件化开发:

                组件是独立的可复用的代码组织单元 组件系统是vue核心特性之一

        组件分类：页面组件 业务组件 通用组件

        页面组件：

                一个vue文件充当一个页面比如:现在的App.vue

        业务组件：

                基本上页面渲染部分很少 主要针对数据的业务逻辑处理的vue文件

        通用组件:

                一个小组件 可以在其他页面上到处多次渲染

        Index页面组件的渲染：

                1 在src里面创建Index.vue

                2 vue文件中定义三大模块 template script style

                3 template里面必须有根节点标签(一般都是div div加id id的名字一般就叫做组件的名字)

                4 script必须定义export default{}表示数据和事件对外暴露使用

                5 在mian.js通过import 引入这个组件

                        import Index from './Index.vue'

                6 在new Vue的options对象里面 通过render函数渲染这个页面组件

                         render: h => h(Index)

                 组件的data必须是一个函数 这个函数必须return一个大括号

                在大括号里面定义组件要用的data数据

                面试题：为什么组件的data必须是一个函数

                原因：将来多个组件打包后 会合并到一起 一旦组件之间有data数据重名,

                就可能出现覆盖的情况  导致打包之后数据混乱所以组件的data是一个函数,

                就形成了一个闭包  数据就变成了局部变量 就算都打包合并到一起,

                不同的组件就是不同的局部变量 数据重名也互相不影响。

02 子组件

        一个组件在另一个组件的template里面渲染使用那么当前的这个组件就是子组件，外部的组件就是父组件

        vue文件存放位置的潜规则：

        页面组件存放在src下views文件夹

        通用组件(反复复用的一小部分效果的组件) 存放在src下componenets文件夹里面

        (潜规则一般组件的首字母大写 不强求 一般在main里面引入的组件对象都是大写)

步骤:

        1.在components文件夹里面创建文件名.vue文件

        2.在子组件中定好当前组件的模板 样式 和数据

        3.在想要引入该组件的vue文件中的script标签里面通过import引入这个子组件

                import 对象名 from './components/组件名'

        4.在当前父组件的compoents:{}里面注册子组件标签名

                components:{

                    Child

                }

        5.在当前父组件的template里面直接通过子组件标签名使用

        总结：

        组件的简单理解：

            把一堆标签封装起来 变成一个自定义标签 可以反复使用

            这个标签里面自带页面样式和动态效果

03 动态组件

        动态组件的使用：

                1 在template模板里面引用component组件(vue提供的自定义标签名称就叫做组件)

                2 component组件有一个is属性 is属性等于哪一个子组件标签名  就会渲染哪一个子组件

                3 使用v-bind:is 绑定is属性 关联一个变量 变量等于哪个子组件就显示哪个子组件

      .native 事件穿透 把事件穿透到#child的标签上面 相当于父组件模板中给子组件的标签绑定事件

      最终绑定的是id为child的标签上面

      html原生的标签绑定事件不需要穿透

      自定义组件或者第三方的组件或者官方提供的其他的组件需要穿透

04 slot插槽

        slot插槽的作用：

                子组件的标签内部默认不能存放任何html代码

                因为子组件最终渲染成功以后 会把子组件的标签的内容替换并渲染成子组件

                template里面的内容

        插槽分类：

        匿名插槽：

                在子组件的模板中 定义slot标签即可

                将来子组件标签内部所写的所以内容 都会被保存到这个slot标签所在的位置

        具名插槽：

                子组件标签内部的slot组件 需要添加一个name属性 值为自定义名字

                外部使用该子组件的时候 想要保存的内容的标签上面定义slot属性,

                值为子组件内部slot组件的name值