Vue parent and child components pass value and update immediately (Vue 父子组件传值且立即更新)

I want the parent component to pass value to the child component, and it will act on the child component immediately to produce an effect, 我想让父组件给子组件传值, 并且会立即作用到子组件上产生效果,

In the following code, I want to make stop and time changed in the parent component and have an immediate effect in the child component. 在下面的代码中, 我想让 stoptime 在父组件中改变过之后, 在子组件中立即产生影响

//Part of the code of the subcomponent: 
props: {
    timeProp: {
      time: Number,
      default: 0
    },
    stopProp: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      time: "",
      stop: ""
    };
  },
  watch: {
    updateTime() {
      this.time = this.timeProp;
    },
    updataStop() {
      this.stop = this.stopProp;
    }
  },
  created() {
    this.time = this.timeProp;
    this.stop = this.stopProp;
}
//Parent component:
<template>
  <div>
    <Countdown :stopProp="stop"  :timeProp="60" ></Countdown>
    <v-btn @click="stop = !stop">Stop</v-btn>
  </div>
</template>
<script>
//The path is no problem
import Countdown from '../components/DurationDown'

export default {
  data: function() {
    return {
      stop: false,
    }
  },
  components: { Countdown }
}
</script>

The situation is as follows:

image

stop will not change with stopProp. stop 不会跟着 stopProp 改变

Thank you all for your help! 感谢各位的帮助!

Based on the code you’ve provided, I don’t see any reason to re-map the stopProp value to stop in your component. Simply reference the prop.

if I don’t use stop in data list, there will be a warning:

therefore, i re-map these two props in data.

thank you to reply my question!

Your watch should be watching a property. So if you want to watch stop…
watch: {
stop() {
this.updateStop();
}
}
So stop in the watch matches the stop property. Then you can call the function or declare the actions to perform.

I see, that was omitted from the code you provided. Might be worth posting all the relevant code. But yes, if you need to mutate that value you have to copy it, mutate it, and emit it back up to the parent.