我使用道具和变量计算属性，如果我需要创建逻辑后接收更改

export default {
name: 'getObjectDetail',
filters: {},
components: {},
props: {
    objectDetail: {
      type: Object,
      required: true
    }
},
computed: {
    _objectDetail: {
        let value = false
        ...

        if (someValidation)
        ...
    }
}

在我的情况下，我没有得到任何信息，也无法检索信息。一定要在手表内部使用试扣

我的情况

setup(props, { emit, attrs, slots, expose }) {
...
....
..... 
}
.....
  watch: {
    isModalActive: function () {
      console.log('action:: ', this.props.isModalActive) // here cause error undefined and no error information on my inspect element dunno why
    }
  },

所以当我试图安慰别人的时候

  watch: {
    isModalActive: function () {
      console.log('action:: ') // this work and printed
      console.log('action:: ', this.props.isModalActive)
    }
  },

如果myProp是一个对象，通常不可以更改。所以，手表永远不会被触发。为什么myProp不被改变的原因是你在大多数情况下只设置myProp的一些键。myProp本身仍然是一个。 试着看myProp的道具，比如“myProp”。A "应该有用。

你需要理解，你拥有的组件层次结构和你如何传递道具，你的情况肯定是特殊的，通常不会被开发人员遇到。

父组件- myprop ->子组件- myprop ->孙子 组件

如果myProp在父组件中被更改，它也会反映在子组件中。

如果myProp在子组件中被改变，它也会反映在孙子组件中。

因此，如果myProp在父组件中被更改，那么它将反映在孙辈组件中。(到目前为止还不错)。

因此，在层次结构中，你不需要做任何事情，道具将具有固有的反应性。

现在说到等级的上升

如果myProp在孙子组件中被更改，它将不会反映在子组件中。你必须在child中使用.sync修饰符，并从grandChild组件中触发事件。

如果myProp在子组件中被更改，它将不会反映在父组件中。你必须在父组件中使用.sync修饰符，并从子组件中触发事件。

如果myProp在grandChild组件中被更改，它将不会反映在父组件中(显然)。你必须使用.sync修饰符子组件并从孙子组件发出事件，然后观察子组件中的道具并在更改时发出事件，该事件由使用.sync修饰符的父组件监听。

让我们看一些代码以避免混淆

Parent.vue

<template>
    <div>
    <child :myProp.sync="myProp"></child>
    <input v-model="myProp"/>
    <p>{{myProp}}</p>
</div>
</template>

<script>

    import child from './Child.vue'

    export default{
        data(){
            return{
                myProp:"hello"
            }
        },
        components:{
            child
        }
    }
</script>

<style scoped>
</style>

Child.vue

<template>
<div>   <grand-child :myProp.sync="myProp"></grand-child>
    <p>{{myProp}}</p>
</div>

</template>

<script>
    import grandChild from './Grandchild.vue'

    export default{
        components:{
            grandChild
        },
        props:['myProp'],
        watch:{
            'myProp'(){
                this.$emit('update:myProp',this.myProp)

            }
        }
    }
</script>

<style>

</style>

Grandchild.vue

<template>
    <div><p>{{myProp}}</p>
    <input v-model="myProp" @input="changed"/>
    </div>
</template>

<script>
    export default{
        props:['myProp'],
        methods:{
            changed(event){
                this.$emit('update:myProp',this.myProp)
            }
        }
    }
</script>

<style>

</style>

但在这之后，你会情不自禁地注意到vue说的尖叫警告

'避免直接改变prop，因为该值将被覆盖 每当父组件重新渲染时。

正如我之前提到的，大多数开发者不会遇到这个问题，因为这是一个反模式。这就是为什么你会得到这个警告。

但是为了解决你的问题(根据你的设计)。我相信你已经做了上面的工作(诚实地说，黑客)。我仍然建议你应该重新考虑你的设计，让它更不容易出现bug。

我希望这能有所帮助。

你试过这个吗?

watch: {
  myProp: {
    // the callback will be called immediately after the start of the observation
    immediate: true, 
    handler (val, oldVal) {
      // do your stuff
    }
  }
}

https://v2.vuejs.org/v2/api/#watch

不确定你是否已经解决了这个问题(如果我理解正确的话)，但这是我的想法:

如果父节点接收myProp，并且你希望它传递给子节点并在子节点中观看它，那么父节点必须有myProp的副本(不是引用)。

试试这个:

new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  },
  components: {
    'parent': {
      props: ['myProp'],
      computed: {
        myInnerProp() { return myProp.clone(); } //eg. myProp.slice() for array
      }
    },
    'child': {
      props: ['myProp'],
      watch: {
        myProp(val, oldval) { now val will differ from oldval }
      }
    }
  }
}

在html中:

<child :my-prop="myInnerProp"></child>

实际上，在这种情况下处理复杂的集合时，你必须非常小心(传递几次)