2017-07-18 15 views
0

次のメソッド "updateCoords"を使用する場合、 'event'引数を指定する必要があります。次のdivは、mousemoveイベントを追跡し、メソッドを使用してリアルタイムでカーソルxおよびy座標を更新します。

<div id="content"> 
    <div @mousemove="updateCoords($event)" style="height:400px;width:400px;border:2px solid black;"> 
    {{x}} {{y}} 
    </div> 
</div> 

<script> 
    new Vue({ 
    el: '#content', 
    data: { 
     x: 0, 
     y: 0 
    }, 
    methods: { 
     updateCoords: function(event){ 
     this.x = event.clientX; 
     this.y = event.clientY; 
    } 
    } 
    }) 
</script> 

イベントが渡されないと、この関数は機能しません。 X座標とY座標はイベントの最後の位置に依存するため、ここでは何かを渡すことになります。しかし、このデータはどのように保存されていますか?イベントは自分自身の中でデータを追跡して保存しますか?

また、私のメソッドに特別な$イベント変数を渡すかどうかは違いがないようです。呼び出し中...

@mousemove="updateCoords($event)" 
//is the same as 
    @mousemove="updateCoords()" 

受信イベント引数が$ eventであることを自動的に認識しますか?または、他の特定のケースで使用する$イベントが重要ですか?

答えて

2

デフォルトでは、ハンドラは引数として$eventを受け取ります。 methods in inline handlersを使用できます。その場合は、$eventを引数の1つにする必要がある場合は、それを含める必要があります。

関連する問題