Javascript A帧：在EventListener中缩放A框；此.el未定义；

我想在A-Frame（JS）中设置一个EventListener，用于侦听“mouseenter”事件并重新缩放方框。我从他那里得到了消息来源。每次我在框上移动光标时，EventListener都会激发，但随后控制台会显示

TypeError: this.el is undefined

参考此代码行：

this.el.object3D.scale.copy(data.to);

代码如下：

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('scale-on-mouseenter', {
    schema: {
      to: {default: '10 10 10', type: 'vec3'}
    },

    init: function () {
      var data = this.data;
      this.el.addEventListener('mouseenter', function () {
        this.el.object3D.scale.copy(data.to);
      });
    }
  });
</script>
...
 <a-box position="0 2 -5" scale-on-mouseenter>
 </a-box>

1）

this.el未定义

这是个问题<代码>此不涉及同一对象：

//....
init: function() {
// here this refers the component object
console.log(this) 
this.el.addEventListener('event', function() {
    // here this refers to this.el (as the object which has the listener added)
    console.log(this)
//...

---

如果创建一个引用数据对象的变量，则可以使用

this.el执行相同的操作：

var el = this.el;
this.el.addEventListener('click', function() {
    el.doSomething();

或者使用lambda，这不会改变范围：

this.el.addEventListener('click', e => {
    this.el.doSomething();

2） 
值与类型不匹配

vec3
需要一个向量：
{x:10，y:10，z:10}
而不是字符串
10

this.el.addEventListener('click', e => {
    this.el.doSomething();