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

在 Vue.js 中，事件修饰符是指用来修饰事件的特殊后缀，例如 `.stop` 和 `.self`。这些修饰符可以通过在事件后面加上点号和修饰符名称来使用。

`.stop` 修饰符可以阻止事件的进一步传播。当事件发生时，它不会继续向上冒泡到祖先元素。

`.self` 修饰符可以限制事件的触发范围。只有当事件被触发的元素是绑定事件的元素本身时，事件才会被触发。

下面是一个示例代码，演示了 `.stop` 和 `.self` 修饰符的使用：

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

new Vue({
  el: '#app',
  methods: {
    parentClick() {
      console.log('Parent clicked');
    },
    childClick() {
      console.log('Child clicked');
    }
  }
});

在这个例子中，当我们点击子元素时，只会触发子元素的点击事件，而不会触发父元素的点击事件。如果我们没有使用 `.stop` 修饰符，那么点击子元素时，父元素的点击事件也会被触发。

另外，如果我们给父元素和子元素都添加了 `.self` 修饰符，那么只有当点击元素是父元素或子元素本身时，才会触发对应的点击事件。如果我们点击了父元素中的空白区域，那么点击事件不会被触发。