事件修饰符.stop和.self有什么区别？请编写代码说明

`.stop` 和 `.self` 都是 Vue.js 中的事件修饰符，它们可以用于控制事件的传播行为。`.stop` 用于阻止事件冒泡，`.self` 用于只在当前元素触发事件。

具体来说，`.stop` 修饰符可以阻止事件自动向上冒泡到父元素，从而避免父元素的相应事件被触发。而 `.self` 修饰符则只在当前元素上触发事件，不会向下传播到子元素。

下面是一个示例代码，可以更好地理解它们的区别：

<template>
  <div class="parent" @click="parentClick">
    <div class="child" @click.stop="childClick">Child</div>
    <div class="child" @click.self="childClick">Child</div>
  </div>
</template>

<script>
export default {
  methods: {
    parentClick() {
      console.log('Parent clicked');
    },
    childClick() {
      console.log('Child clicked');
    },
  },
};
</script>

在上面的代码中，我们在一个父元素上绑定了两个子元素的点击事件，并分别使用了 `.stop` 和 `.self` 修饰符。当我们点击第一个子元素时，由于使用了 `.stop` 修饰符，事件不会向上冒泡到父元素，因此只会触发子元素的点击事件，控制台会输出 `Child clicked`；而当我们点击第二个子元素时，由于使用了 `.self` 修饰符，事件只会在当前子元素上触发，不会向下传播到其他元素，因此同样只会触发子元素的点击事件，控制台同样会输出 `Child clicked`。