vue 04

vue 04

vue过滤器

用处： 转换格式, 过滤器就是一个函数, 传入值返回处理后的值

应用场景：插值表达式和v-bind表达式

语法：全局，在main.js中

Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})

局部，在当前vue文件中

filters: {过滤器名字: (值) => {return “返回处理后的值”}

过滤器传参和多过滤器

语法：

过滤器传参: vue变量 | 过滤器(实参)

多个过滤器: vue变量 | 过滤器1 | 过滤器2

计算属性

用处： 一个数据, 依赖另外一些数据计算而来的结果

特点：具有缓存性，函数只执行一次，只要依赖的量不变，再次执行时从缓存获取结果

语法：

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

侦听器

用处：可以侦听data/computed属性值改变

语法：

watch: {
    "被侦听的属性名" (newVal, oldVal){    
    }
}

深度侦听和立即执行

watch: {
    "要侦听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {     
        }
    }
}

组件

用处：可复用的 Vue 实例, 封装标签, 样式和JS代码，本质是vue文件，

注意事项：style标签中需要添加scoped

组件父子通信

通信：组件之间进行数据传递

父的概念：使用其他组件的vue文件 ， 就是页面使用import

子的改名：被引入的组件(嵌入) from 后面的文件路径的文件

父子通信步骤

1、先创建子vue组件（在component文件下创建）

在子组件中需要有props，用于接收父传递的数据

在子组件中，可以使用this.$emit方法向父中的自定义方法传递数据

2、父引入子vue组件（import 名称 from ’ 路径’）

3、注册组件 （components:{ 名称：名称（可简写直接写名称） }）

4、使用，把注册组件的名称当作标签使用

在父中，绑定自定义方法，根据子传递过来的数据，进行数据的修改，

以上完成父子之间的通信

总结：

在子中，根据props获取父传递的值

在父中，设置自定义的方法，子通过this.$emit方法传递数据，父根据传递过来的数据和自定义的方法直接改变数据，让后子通过props重新获取数据，形成一个闭环。

组件与组件直接进行通信

组件一向组件二传递数据的过程

需要创建一个虚拟的vue对象，当作一个桥梁，让两个组件之间存在关联，

在组件一中需要导入这个虚拟的vue对象

import 名称 form “路径”

在组件二中也需要导入这个虚拟的vue对象

在组件一中，定义的名称.$emit 向虚拟的vue对象传递参数，需要传入一个方法，

在组件二中，在created中使用定义的名称.$on获取从虚拟vue对象的数据和传入的方法

总结：通过虚拟vue对象，完成组件向组件的数据传递