怎么在vue项目中设置一个可重用的验证码组件验证码要求添加干扰点和干扰线要求父组件可以获取到子组件验证码随机到的值。要求整体内容的风格为：尽量简单直接一点

1. 创建一个名为Captcha的Vue组件，在组件中定义一个data属性用于存储验证码随机生成的值，以及一个方法用于生成验证码。

2. 在组件模板中，使用canvas绘制出验证码，并添加干扰点和干扰线。

3. 在组件中定义一个方法，用于生成随机字符串作为验证码的值，并将其存储在data属性中。

4. 在组件中定义一个事件，当用户点击验证码时，重新生成验证码。

5. 在父组件中引入Captcha组件，并使用props传递验证码的值给父组件。

6. 在父组件中，使用Captcha组件并监听其事件，当验证码被点击时，重新生成验证码。

示例代码如下：

<template>
  <div>
    <captcha @click="refreshCaptcha" :value="captchaValue"></captcha>
  </div>
</template>

<script>
import Captcha from './Captcha.vue'

export default {
  components: {
    Captcha
  },
  data() {
    return {
      captchaValue: ''
    }
  },
  mounted() {
    this.refreshCaptcha()
  },
  methods: {
    refreshCaptcha() {
      this.captchaValue = this.$refs.captcha.generateCaptcha()
    }
  }
}
</script>

Captcha组件代码如下：

<template>
  <canvas ref="canvas" @click="refreshCaptcha"></canvas>
</template>

<script>
export default {
  data() {
    return {
      captchaValue: ''
    }
  },
  mounted() {
    this.generateCaptcha()
  },
  methods: {
    generateCaptcha() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      const length = 4
      const width = canvas.width
      const height = canvas.height
      const fontSize = Math.floor(height * 0.8)
      const xGap = Math.floor(width / (length + 1))
      const y = Math.floor(height / 2)
      let captcha = ''

      ctx.clearRect(0, 0, width, height)
      ctx.font = `${fontSize}px Arial`
      ctx.textBaseline = 'middle'
      ctx.textAlign = 'center'

      for (let i = 0; i < length; i++) {
        const char = chars[Math.floor(Math.random() * chars.length)]
        captcha += char
        const x = xGap * (i + 1)
        ctx.fillText(char, x, y)
      }

      for (let i = 0; i < 10; i++) {
        const x1 = Math.floor(Math.random() * width)
        const y1 = Math.floor(Math.random() * height)
        const x2 = Math.floor(Math.random() * width)
        const y2 = Math.floor(Math.random() * height)
        ctx.beginPath()
        ctx.moveTo(x1, y1)
        ctx.lineTo(x2, y2)
        ctx.stroke()
      }

      for (let i = 0; i < 100; i++) {
        const x = Math.floor(Math.random() * width)
        const y = Math.floor(Math.random() * height)
        const r = Math.floor(Math.random() * 2)
        ctx.beginPath()
        ctx.arc(x, y, r, 0, 2 * Math.PI, false)
        ctx.fill()
      }

      this.captchaValue = captcha
      return captcha
    },
    refreshCaptcha() {
      this.generateCaptcha()
      this.$emit('click')
    }
  }
}
</script>