解决:[Vue warn]: Avoid mutating a

封装二维码弹窗组件时候遇到操作props的问题

子组件

<template>
 <!-- 🚀🚀🚀 不带.sync 🚀🚀🚀-->
  <div class="dialog-info">
    <el-dialog
      top="20vh"
      :title="title"
      :modal-append-to-body="false"
      :visible="qrDialog" 
      width="16%"
      @close="$emit('close')"
      id="qr-code-dialog"
    >
      <div class="qr-section">
        <vue-qr
          :text="wholeLink"
          :margin="0"
          colorDark="#000000"
          colorLight="#fff"
          :logoSrc="qrLogo"
          :logoScale="0.2"
          :size="180"
        ></vue-qr>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
import qrLogo from '@/assets/image/qrlogo.jpg'

export default {
  name: 'QrCodeShare',
  components: { vueQr },
  props: {
    title: {
      type: String,
      default: '转发助力'
    },
    // 显示弹窗
    qrDialog: {
      type: Boolean,
      default: false
    },
    // 访问路径
    qrlink: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      preLink: 'https://www.baidu.com/#',
      qrLogo: qrLogo
    }
  },
  computed: {
    wholeLink() {
      return this.preLink + this.qrlink
    }
  }
}
</script>

父组件

<template>
  <div>
  <!-- 调用父组件 -->
   <dialog-info
      :qrDialog="qrDialog"
      :qrlink="qrlink"
      title="转发助力"
      :showDesc="true"
      @close="qrDialog=false"
    ></dialog-info>
 <!-- 🚀🚀🚀 直接在emit事件中修改 🚀🚀🚀-->
  </div>
</template>
<script>
  import DialogInfo from '@/components/dialog-info'
export default {
  components: { DialogInfo },
}
</script>