【Svelte】-（5）DOM事件 / 事件修饰符 / 组件事件 / 事件转发 （组件之间的事件沟通）

DOM事件

在Svelte之中，我们如果要绑定DOM上的事件可以添加 on: 关键词进行监听。

<div on:mousemove={handleMousemove}>
1

这一点和vue很像，但在Svelte中可没有简写。

下面来看一个完整事例：

<script>
  let x = 0, y = 0

  function handleMousemove(e) {
    x = e.clientX
    y = e.clientY
  }
</script>

<div on:mousemove={handleMousemove}>
  鼠标的位置是： {x} x {y}
</div>

<style>
  div {
    width: 100%;
    height: 100vh;
    cursor: default;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

预览

当然我们也可以这样写，官方叫这种方式为：内联声明事件处理

<div on:mousemove={e=>{x=e.clientX;y=e.clientY}}>
  鼠标的位置是： {x} x {y}
</div>
1
2
3

效果是一样的，加不加引号也无所谓

<div on:mousemove="{e=>{x=e.clientX;y=e.clientY}}">
1

对了值得一提的是在Svelte中你不用担心性能问题，怎么方便怎么来。（符合你需要的规范是前提）

事件修饰符

修饰符如名，给事件处理添加独立功能。

首先我们得知道有哪些事件修饰符：

当然修饰符可以一起用 | 间隔开来。

下面来看一个案例

<div on:mousemove|once={e=>{x=e.clientX;y=e.clientY}}>
  鼠标的位置是： {x} x {y}
</div>
1
2
3

这样就只会触发一次了，再看一个案例

<button on:click|once|self={follower}>
	关注
</button>
1
2
3

这样就可以多个修饰符一起用

组件事件

组件也可以调度事件。但是必须创建一个 event dispatcher，即组件内必须创建一个相同事件并在外部进行分配。
其实就像子组件给父组件事件。

在子组件内我们需要使用 createEventDispatcher function。
const dispatch = createEventDispatcher() 实例化不支持在 setTimeout 之类的事件回调之中使用)。

我们创建一个 Follower.svelte 组件：

<script>
  import { createEventDispatcher } from 'svelte'

  const dispatch = createEventDispatcher()

  let name = 'uiuing'

  function tellTip() {
    dispatch('tip', {
      name
    })
  }
</script>

<button on:click={tellTip}>关注uiuing</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

App.svelte

<script>
import Follower from './Follower.svelte'
</script>

<Follower on:tip={e=>console.log(e.detail.name)}/>
1
2
3
4
5

点击之后预览

代码解读

on:tip tip为事件名称，e.detail 内容为子组件 dispatch 内容，dispatch('事件', 传递对象)

事件转发

其实事件转发很简单，其实就是组件嵌套的时候，我们把事件一层一层传递上去。

例如到 Follower 组件和 App 中间再嵌套一个 Send 组件

<script>
  import Follower from './Follower.svelte'

  import { createEventDispatcher } from 'svelte'

  const dispatch = createEventDispatcher()

  function send(e) {
    dispatch('tip', e.detail)
  }
</script>

<Follower on:tip={send} />
1
2
3
4
5
6
7
8
9
10
11
12
13

我们将获取到的数据往上传，你改变的只是function里接到 event 然后把 e.detail 原封不动传递上去。

如果我们需要把所有 tip 事件都转发呢？

直接简写就可以了

<script>
  import Follower from './Follower.svelte'
</script>

<Follower on:tip />
1
2
3
4
5

效果是一样的，贴上 App.svelte 的代码大家自己实验。

<script>
import Send from './Send.svelte'
</script>

<Send on:tip={e=>console.log(e.detail.name)}/>
1
2
3
4
5

事件转发也适用于 DOM 事件

例如 on:click

App.svelte

<script>
  import Follower from './Follower.svelte'
</script>

<Follower on:click={()=>{console.log('关注成功！')}} />
1
2
3
4
5

Follower.svelte

<button>关注uiuing</button>
1

这样点击按钮是没有效果的

我们需要转发一下

Follower.svelte

<button on:click>关注uiuing</button>
1