对Vue一些方法的理解

不念不忘少年蓝@ 2023-06-08 06:34 13阅读 0赞

## Vue.filter ##

**场景:时间戳转化成年月日这是一个公共方法,所以可以抽离成过滤器使用**  
并且可以在HTML标签中使用，这就可以在v-for中使用

**在v-for中并不能运用过滤器， 但是可以结合计算属性， 如果v-for中遍历的数组不是所想要的，可以先通过computed进行处理，然后在遍历出的item中使用过滤器**

// 使用
    // 在双花括号中
    { {  message | capitalize }}
    
    // 在 `v-bind` 中
    <div v-bind:id="rawId | formatId"></div>
    
    // 全局注册
    Vue.filter('stampToYYMMDD', (value) =>{ 
      // 处理逻辑
    })
    
    // 局部注册
    filters: { 
      stampToYYMMDD: (value)=> { 
        // 处理逻辑
      }
    }

## 计算属性 ##

**计算属性可以利用闭包的特性进行参数传递，以达到灵活的处理在html中的数据，并且修改对应data中的数据，简化html中的逻辑代码**  
![在这里插入图片描述][20191127100441153.png]  
**如此处的场景应用，处理逻辑相同，但是对应的变量不同，若不传参，则需要写三个计算属性，相当麻烦，而利用传参，则可以通过参数进行灵活的设置对应data中的属性**  
![在这里插入图片描述][20191127100505842.png]

## .sync ##

**在 vue@1.x 的时候曾作为双向绑定功能存在，即子组件可以修改父组件中的值; 在 vue@2.0 的由于违背单项数据流的设计被干掉了; 在 vue@2.3.0+ 以上版本又重新引入了这个 .sync 修饰符;**

**父组件**

**编译时会被扩展为**

<home :title="title" @update:title="val => title = val"/>

**子组件可以通过$emit 触发 update 方法改变**

mounted(){ 
    	  this.$emit("update:title", '这是新的title')
    	}

[20191127100441153.png]: /images/20230531/edddc893a4054b1f94ab87f1b2b3ac5e.png
[20191127100505842.png]: /images/20230531/60b9b114393f40e4aaae6177dc7065e1.png