今天寫一個input的上傳demo例子玩，主要想實現的效果是父元件圖片變化，子元件也跟著變化

寫的過程中發現父元件已經更新圖片，而子元件無動於衷，想著是無法深度監聽，就是watch了一下deep，但是還是不行，連watch都沒進去，

經過一段時間的找bug，後來發現沒有$set，所以vue無法感知到所以無法更新,真的是紙上得來終覺淺,還是需要多敲,coding

我敲

例子:
父元件

<template>
  <div>
    <div>
      <h1>上傳元件</h1>
      <input ref="uploadInput"
             type="file"
             @change="chooseImg">
    </div>
    <div>
      <ImgShow :imgValue="imgValue"
               :url="url" />
    </div>
    <div class="show">
      <img :src="url"
           alt="">
    </div>
  </div>

</template>

<script>
import axios from 'axios'
//import * as qiniu from 'qiniu-js'
import ImgShow from './ImgShow.vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
      imgValue: {},
      url: ''
    }
  },

  components: {
    ImgShow
  },
  methods: {
    chooseImg () {
      let file = this.$refs.uploadInput.files[0]
      console.log(file)
      let imgUrl = URL.createObjectURL(file)
      console.log(imgUrl)
      let title = Math.random() * 10
      // this.imgValue = { imgUrl, title }
      // this.imgValue.imgUrl = imgUrl
      // this.imgValue.title = title
      this.$set(this.imgValue, 'imgUrl', imgUrl)
      this.$set(this.imgValue, 'title', title)
      this.url = imgUrl
    }
  },
  mounted () {
    axios.get('/api/getconfig/sodar?sv=200&tid=gpt&tv=2021060901&st=env').then((res) => {
      console.log('res', res)
    })
    // const observable = qiniu.upload(file, key, token, putExtra, config)
    //const subscription = observable.subscribe(observer)  上傳開始
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  .wrap {
    color: #00ff00;
  }
}
.show {
  img {
    width: 100px;
    height: 100px;
  }
}
</style>
 

子元件

<template>
  <div>
    <h1>圖片顯示:</h1>
    <h3>{{imgValue.title ||` 暫無上傳圖片標題`}} {{myname}}</h3>
    <div class="imgshow">

      <img :src="imgValue.imgUrl || `暫無上傳圖片連結`">
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImgShow',
  data () {
    return {
    }
  },
  watch: {
    'imgValue': {
      handler (newName) {
        console.log('newName', newName)
      },
      deep: true,
      immediate: true
    },

  },
  computed: {
    myname: function () {
      return this.imgValue.title + this.imgValue.imgUrl
    }
  },
  props: {
    imgValue: {
      type: Object,
      default () {
        return {
        }
      }
    },
    url: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.imgshow {
  width: 400px;
  height: 400px;
  box-sizing: border-box;
  border: 1px solid black;
  img {
    display: flex;
    width: 100%;
    height: 100%;
  }
}
</style>
 

刪掉watch程式也能跑了