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

.stop和.self都是Vue中的事件修饰符，它们的作用是控制事件的传播方式，但是它们的作用是不同的：

.stop修饰符可以阻止事件继续传播，即停止事件冒泡。使用.stop修饰符后，事件将不会向父元素传递，只会在当前元素上触发。例如，当我们在一个子元素上绑定click事件时，如果希望点击该子元素时不触发其父元素的click事件，则可以使用.stop修饰符。

.self修饰符可以限制事件只在当前元素上触发，不会向父元素传递。使用.self修饰符后，只有当事件发生在当前元素本身时才会触发，而不会在其子元素上触发。例如，当我们在一个父元素上绑定click事件时，如果希望只有在点击该父元素本身时才触发click事件，而不是在其子元素上触发，则可以使用.self修饰符。

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

<div class="parent" @click="parentClick">
  <div class="child" @click.stop="childClick">子元素</div>
  <div class="child" @click.self="childClick">子元素</div>
</div>

new Vue({
  el: '#app',
  methods: {
    parentClick() {
      console.log('父元素点击事件');
    },
    childClick() {
      console.log('子元素点击事件');
    }
  }
})

在上面的代码中，当我们点击第一个子元素时，只会触发子元素的点击事件，不会触发父元素的点击事件（即事件冒泡被停止）。而当我们点击第二个子元素时，只有在点击该子元素本身时才会触发点击事件，不会在父元素上触发（即事件不会向上冒泡）。