vue2进阶

vue2进阶

一、组件通信

• 父传子 自定义属性

<template>
<!-- 父组件中对子组件绑定 msg属性，  objGoods是父组件的一个变量 -->
	<GroupGoods  v-bind:msg="objGoods"></GroupGoods>
</template>
<script>
    export default {
        //子组件中使用props接收信息
        props: {
            msg: {
                //该属性的数据类型
                type: String,
                //父组不传递的情况，该属性的默认值
                default: 'hello msg'
            },
        }
    }
</script>

• 子传父 自定义事件

//子组件中使用 $emit 传递信息
<script>
    export default {

        methods: {
            //子组件定义响应事件，该事件向父组件发送信息
            goAdd() {
                this.$emit("jumpPage", "addGoods");//jumpPage，事件名称 addGoods，事件的参数
            }
        }
    }
</script>

//父组件接收信息
<template>
<!-- 子组件身上响应事件 goPage 是父组件中定义的响应事件 -->
<GroupGoods  @jumpPage="goPage"></GroupGoods> 
</template>

<script>
    export default {
        //在父组件中编写事件响应函数
        methods: {
            goPage(par, par1, par2, par3, par4) {
                console.log("goPage", par, par1, par2, par3, par4);
            }
        }
    }
</script>

• v-model 可以父传子， 子传父
• 事件总线 父传子，子传父， 兄弟组件之间传递
• $parent 父传子
• $children 子传父
• $liseteners 子传父， 可以取得父组件绑定到子组件身上的事件
• $attr 父传孙， 可以取得父组件绑定到子组件身上的属性
• 作用域插槽

二、vue数据监测

概述

1. 字符串、数字、布尔类型进行监测时，变量的变化会立即影响到页面的渲染
2. 对引用数据类型（对象，数组）的增删，不会改变页面渲染，除非地址发生改变。
   1. 解决方案

数组、使用数组的api来增删元素
this.listUser.pop();
this.listUser.splice(0, 1);
this.listUser.push({name: '李四', age: 20});

数组与对象 使用this.$set方法来添加属性 使用this.$delete删除对象属性
this.$set(this.listUser, 1, {name: '李四', age: 20})
this.$delete(this.listUser, 0);

this.$set(this.objUser, "sex", '男');
this.$delete(this.objUser, "sex");

图栗

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JF3pzxcs-1691592900819)(assets/diff.png)]

三、生命周期

一个组件生命周期有四个阶段

beforeCreate() 组件创建之前，此时无法获取 $data 和 $el

开辟组件空间，初始化数据监测、数据代理

created() 组件创建完毕，此时无法获取 $data 和 $el

解析模板，在内存中生成虚拟DOM

breforeMount():组件挂载之前，无法获取页面节点

将内存中的虚拟DOM转为真实DOM插入页面

mounted():组件挂载之后,就能在Vue中获取页面节点

beforeUpdate()：组件数据更新之前,此时数据是新的页面是旧的

根据新数据生成新的虚拟DOM，随后新旧虚拟DOM进行比较，最终完成页面更新

updated()：组件数据更新过后。此时页面与数据都是新的

beforeDestroy():销毁之前，此时 data、methods、指令都是处于可用状态

destroyed()：销毁后，此时真实DOM可用

图例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7GSKt5WE-1691592900820)(assets/vue生成周期.png)]

四、动态组件

//is这个属性后面的变量，名字是哪个组件，动态显示这个组件
<component :is="currentTab"></component>
import TabA from "./TabA";
import TabB from "./TabB";
data(){
    return{
        currentTab:"TabA"
    }
}

实现原理：

1. 采用v-if来动态渲染节点。一旦切换组件，之前的组件就会被销毁。
2. 页面开始加载的时候，不会把所有组件加载一遍。

五、keep-alive 缓存组件

keep-alive的使用

<keep-alive include="TabAVue">
    <component :is="currentTab"></component>
</keep-alive>

include：值为字符串或者正则表达式，只有名字匹配的组件才能被缓存（白名单）

exclude: 值为字符串或者正则表达式，当匹配到组件名字，代表这个组件不被缓存（黑名单）

max：设置当前组件缓存的做大值，keep-alive能够缓存最多几个组件max来决定

include值为字符串：

<keep-alive include="TabAVue,TabCVue"> 
	<component :is="currentTab"></component>
</keep-alive>

include值为正则表达式

<keep-alive :include="/TabAVue|TabCVue/">
    <component :is="currentTab"></component>
</keep-alive>

还可以写一个数组

<keep-alive :include="['TabAVue','TabCVue']">
	<component :is="currentTab"></component>
</keep-alive>

keep-alive的生命周期钩子函数。

//必须要被keep-alive缓存后这个组件才能使用这个生命周期
//当你进入这个组件的是执行
    activated(){
        console.log("进入TabA组件");
    },
        
    //当你离开这个组件的会被执行的函数
    deactivated(){
        console.log("离开TabA组件");
    },

六 mvvm设计模式

什么是mvvm:

• m: module，即模型层，也叫数据的结构以及数据的处理。例：对象里属性的构成
• v: view, 即视图层，也是vue中template部份的代码；可以理为用户可以看到的内容
• vm: viewModule，即视图模型转换功能，可以理解为vue中的v-model指令。该指令将数据绑到视图上，当数据变化时页面变化，当页面变化时，数据会随着一起变化。这样的功能就称为viewModule。

七、mixin

功能：可以将组件中通用 的代码进行复用。

使用场景：代码通用性必须非常强，页面中有90%以上代码雷同的，可以放入混入。

1、在src目录下新建mixin文件夹，新建pageMixin.js文件

export default {
    data() {
        return {
            dialogInfo: "",
            curPage: 1,
            pageSize: 10
        }
    },
    methods: {
        changePageInfo(curPage, pageSize) {
        },
        // 查询事件，带条件
        search() { },
        //删除
        del(id) { },
    },
}

2、在需要混入的组件中，配置mixins

import pageMixin from '@/mixin/pageMixin';
export default {   
	mixins: [pageMixin],
}

说明：混入中除了生命周期函数之外，其它所有的配置项中，父组件定义的内容会覆盖掉mixins中定义的内容。生命周期不会覆盖，它会先执行混入中的生命周期，再执行父组件中的生命周期。

八、自定义指令

// 全局自定义指令
Vue.directive("btnPower", {
    inserted: function (el, binding, vnode, oldVnode) {
        const path = vnode.context.$route.path;
        //  判断是否有权限，1表示有权限，0表示没有
        if (0 == judgeBtnPower(path, binding.value)) {
            el.remove();
        }
    }
})
// 局部自定义指令
directives: {
    //指令名字bgcolor，以后使用v-bgcolor
    //内部提供生命周期函数
    bgcolor: {
        //这个生命周期函数是指令生命周期函数，inserted一旦被执行，使用这个指令的标签已经被挂载父节点中
        //el代表获取节点，obj代表指令传递回来值
        inserted(el, obj){
            console.log("自定义指令", el);
            console.log("指定指令传值", obj);
            //原生JS操作
            el.style.background = obj.value
        }
    }
}

九、事件修饰符

v-model修饰符

修饰符的功能：可以将v-model中绑定的数据做转换

• .number 将绑定的数据转换成number类型
• .trim 将绑定的数据两边的空格去掉
• .lazy 廷迟将数据设置到变量中

v-on

事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

栗子

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>