知识点1:Vue2.0的八种常用传值方式

一.父传子prop

着重于传递数据，不能调用子组件的方法

v-bind动态绑定属性, 将字符串转换为变量,表达式,布尔值,对象等任何类型的值

代码如下:

(1)父级

<template>
    <div>
        <!-- 组件写法一般为小写(a-b) -->
        <Child :fatherData="fatherData" @childEvent="childEvent" />
        <h1>{{ childData }}</h1>
    </div>
</template>

<script>
export default {
    components: {
        Child: () => import('./child')
    },
    data() {
        return {
            fatherData: '父级的数据-->传子',
            childData: ''
        };
    },
    methods: {
        childEvent(data) {
            this.childData = data;
        }
    }
};
</script>

(2)子级

<template>
    <div>
        <p>------------------------------------父传子------------------------------------------</p>
        <h1>{{ fatherData }}</h1>
        <p>-------------------------------------子传父------------------------------------------</p>
        <button @click="sendChildData">子传父按钮</button>
    </div>
</template>

<script>
export default {
    props: ['fatherData'],
    methods: {
        sendChildData() {
          this.$emit('childEvent','子级数据-->传父')
        }
    }
};
</script>

二.ref父传子

主要调用子组件的属性方法，不擅长数据传递

ref给元素或子组件注册引用信息(自定义)

Zyq:ref就是拿到了子组件的所有东西,可以直接操作

三.emit子传父

传值/调用方法

此图与prop图同,代码在prop部分

四.Bus事件总线

1. 概述

适用范围

进行兄弟组件传值

2. 使用

实现效果:

案例前提: A,B组件都引入App.vue

[1] 创建Bus组件(bus.js)

 //bus.js
 import Vue from 'vue'
 export default new Vue()

[2] A组件:发送数据

发送valueA:

Bus.$emit(‘event’,valueA)

 <template>
   <div>
     A组件:
     <input type="button" value="点击触发" @click="changeA">
     <span>{{valueA}}</span>
   </div>
 </template>
 
 <script>
 import Bus from './bus.js'
 export default {
   data(){
     return{
       valueA:4
     }
   },
   methods:{
     changeA(){
       Bus.$emit('val',this.valueA)
     },
   }
 }
 </script>

[3] B组件:接收数据

(1)在created/mounted中接收:

Bus.$on(‘event’,xxx)

(2) 组件销毁时(destroyed/beforeDestroy)解除事件绑定:

Bus.$off(‘event’,xxxx)

销毁原因:

bus的自定义事件是基于“发布订阅”模式的。当我们没有清除自定义事件，就会在页面离开再进入后就会触发 $on，就会给事件队列中添加一个refreshGroupList事件，每次离开页面再进入都会添加，所有$ emit触发的时候都会多执行一次自定义事件的回调函数。

简单来说: $on事件是不会自动清除销毁的，需要我们手动来销毁。 不销毁的话会一直叠加的调用这个方法

 <template>
     <div>
         B组件:
         <input type="button" value="点击触发" @click="changeB" />
         <span>{{ valueB }}</span>
     </div>
 </template>
 
 <script>
 import Bus from './bus.js';
 export default {
     data() {
         return {
             valueB: 0
         };
     },
     mounted() {
         Bus.$on('val', data => {
             this.valueB = data;
         });
     },
     destroyed() {
         Bus.$off('val');
     },
     methods: {
         changeB() {
             this.valueB++;
         }
     }
 };
 </script>

知识点2:新增--编辑页点击区分

通过switch区分

标题还能判断

知识点3:flex布局

一.弹性布局概述

弹性布局（或者叫弹性盒子布局），可以让网页布局更简洁，更易于维护。

[1]基本概念

 .box{
   display: flex;
 }

容器会变成:flex容器（flex container）

容器内部的元素:flex项目（flex item）

main axis:主轴
cross axis:交叉轴

一个flex容器默认存在两个轴，横向的主轴（main轴）和纵向的交叉轴（cross轴）。默认情况下flex项目按照main轴排列

[2]flex默认效果

内部item不独立成行
flex项目高度适应容器高度(普通为适应内容高度)
flex项目在flex容器沿主轴排列

其中1,2点同行内元素

二.flex容器

[1]flex-direction:主轴

概念:设置flex容器主轴方向,起点

row:主轴为水平方向, 默认值(123 456 789 空)
column:主轴为垂直方向
row-reverse:起点在右侧(空 789 456 123)
column-reverse:起点在下沿

[2]justify-content:水平

概念:容器水平排列方式

flex-start: 左对齐(123 456 789 空)
flex-end: 右对齐(空 123 456 789),*与row-reverse对比
flex-center:居中
space-between:两端对齐, 项目之间间隔相等 ==>123空456空789,两边填满,然后间隔
space-around:每个项目两侧相等,故 (项目<-->项目)间隔 = (项目<-->边界)间隔*2

IMG_0148(20220822-163306).PNG

[3]align-items:垂直

概念:控制flex项目在容器中的垂直排列方式

flex-stretch(默认值):延伸,占满整个容器高度
flex-start:flex项目在交叉轴开始位置展示
flex-end:flex项目在交叉轴结束位置展示
flex-center:flex项目在交叉轴居中展示

三.flex项目

[1]flex:

综合下面三个样式

flex-grow：属性定义项目的放大比例，默认为0，空间充足，等比例补全(1)。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

(1)flex项目宽度超过容器宽度, 会等比例缩小.

(2)等比例情况下,flex-shrink越大,项目越小
flex-basis：设置宽度,主轴排列为宽度，交叉轴排列为高度，设置px，默认值是auto。

以后用flex

flex:0 1 auto

flex:1

[2]align-self:

四.练习

1.让一个容器在页面中水平垂直居中

2.底部导航栏

Week34--8.22