2021-06-25

vue组件

一、高内聚 ，低耦合是什么？

软件工程 类的内聚性
内聚：相关的放在一起
耦合：聚在一起,js代码是单线程，分模块解决某部分出错，以下的不运行的问题，模块与模块相互依赖的程度 是耦合度
提高稳定性 可维护性

示例：

二、什么是组件：

1.模块化与组件化的区别

模块化：逻辑的角度划分
组件化：根据ui界面划分 类似于封装函数 这是分装页面
vue是单页面，切换页面是路由的切换，组件的切换实现的页面的跳转

2如何定义组件

方法1
两步 使用 Vue.extend 配合 Vue.component 方法

// 第一步 定义组件 extend (不写在vue实例里)

// 第一步1声明一个组件
let tep1 = Vue.extend({
    template: "<div>1</div>"
});
// 第二步2全局注册组件 
//component 后的是组件名
// 参数一是名字  参数二是模板  使用时当作标签使用
Vue.component("zujianname", tep1);

vue.extend（{
template：“字符串 ----组建的内容}）
vue.component（”组件名“，tep1)

方法2
// 方法2
直接使用Vue.component

Vue.component("login", {
    template: "<h3>我是h3</h3>"
});

vue.component方法
vue.component（ ”名字“，{template:”组建的内容}）
把组件当作标签使用在视图层
弊端：模板里是字符串

方法3 ：
定义模板
新的script 里 设置类型 type=x-template id 给定一个id

<!-- 方法3  新的srcipt 标签 -->
<script id="tmpl1" type="x-template">
<div>
    <h3>Zhuce </h3>
</div>
</script>

// 定义模板
Vue.component("register", {
    template: "#tmpl1"
})

注意只能有一个根节点

方法4：
template 标签 给定一个id 在div 里写组件的内容
最常用

//最常用   最常用     
//  Vue.component(“名字” , {template：“模板id”}）  
Vue.component("foot", {
    template: "#tmpl2"
})

注：组件名不能是 驼峰命名法
不能用原有的html 元素 组件名
只能有一个根节点

---

组件中的数据和事件

对象的深拷贝和浅拷贝
组建的重复使用，复用性，
组件里的data 必须为一个方法返回一个对象 目的是数据分离 对象的深拷贝 ，传值 ，
组件里的methods 拿 data的数据还是 用this.
提示：这里对文章进行总结：
例如：

定义局部子组件

在 vue实例化里 与data 同级 定义一个components:{
// 定义一个私有的组件 这个组件只能用在app2的控制器里

    //与data同级
    components:{
        login:{
            template:"<h1>这是一个私有的组件</h1>",
            data (){
                return{
                    num3:3,
                }
                //组件中的data是一个函数返回一个返回值 
                // 因为data  如果单纯用对象存储  对象的深拷贝 传值会导致所有的值都会受影响
                
            }
        }
    }

插槽
组件里写一个slot 双标签 占位
在子组件中占位 父组件中填充内容
插槽有两种
1，默认插槽
2， 可以命名的插槽

        <slot></slot>
        <!-- 可以命名的插槽 -->
        <slot name="header"></slot>

在父组件中填充内容
默认的插槽直接填写内容
有名字的v-slot：header

    <template v-slot:header>
      <div>这是头部</div>
    </template>
    <template v-slot:footer>
      <div>这是底部</div>
    </template> 

根据课程类型的不同 获取不同的课程列表、

<!-- 在组件上传参 在组件标签里  type="free" pagesize="10" pagenum="1"
                    在创建组件里 props: {
            type: [String, Number],
            pagenum:  [String, Number],
            pagesize:  [String, Number]
        },-->