2022-01-14 vue组件备份this对象

项目里组件定制表单时，发现同个组件在同个页面放多个，组件的属性就会联动。

原因

是在写代码时，用到了filters过滤器，而过滤器是在vue实例创建之前声明的，所以取不到this（指向vue实例），但是想在filters里用this怎么办呢。

错误写法

是像普通组件一样，在script标签（export之前let定义一个变量that，然后在beforecreated生命周期对this进行赋值备份），这样filters内部就可以拿到全局变量that了。

<script>
import IconsDialog from './IconsDialog'
let that = null
export default {}
</script>

  beforeCreate() {
    that = this
  },

问题就出在这里，多个组件出现在同一个页面，本质上他们处于同一个作用域，每次对that的赋值，就更新了所有实例的that，造成所有属性都联动一致。

正确写法

是可以在使用时，通过传参的形式传入一个this给filters

科普：
为什么template模板中不用使用this来引用变量？