如何聆听“道具”的变化

2020/10/07 15:21 · javascript ·  · 0评论

VueJs 2.0文档中,我找不到任何可以监听props更改的钩子

VueJ是否有类似onPropsUpdated()或类似的钩子

更新资料

正如@wostex所建议的,我尝试进入watch我的财产,但没有任何变化。然后我意识到我有一个特殊情况:

<template>
    <child :my-prop="myProp"></child>
</template>

<script>
   export default {
      props: ['myProp']
   }
</script>

myProp将父组件接收到的child组件传递给了然后,watch: {myProp: ...}它不起作用。

您可以watch通过props更改props来执行一些代码:

new Vue({
  el: '#app',
  data: {
    text: 'Hello'
  },
  components: {
    'child' : {
      template: `<p>{{ myprop }}</p>`,
      props: ['myprop'],
      watch: { 
      	myprop: function(newVal, oldVal) { // watch it
          console.log('Prop changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <child :myprop="text"></child>
  <button @click="text = 'Another text'">Change text</button>
</div>

你试过这个吗?

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

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

他,

就我而言,我需要一个解决方案,只要任何道具都会发生变化,就需要再次解析我的数据。我已经厌倦了为所有道具制作单独的观察器,所以我使用了以下方法:

  watch: {
    $props: {
      handler() {
        this.parseData();
      },
      deep: true,
      immediate: true,
    },

从该示例中脱颖而出的关键点是使用,deep: true因此它不仅监视$ props,而且还嵌套了诸如eg的值props.myProp

您可以在此处了解有关此扩展监视选项的更多信息:https : //vuejs.org/v2/api/#vm-watch

您需要了解您所拥有的组件层次结构以及如何传递道具,当然您的情况很特殊,开发人员通常不会遇到这种情况。

父组件-myProp->子组件-myProp->孙子组件

如果myProp在父组件中进行了更改,它也将反映在子组件中。

如果myProp在子组件中更改,它也将反映子组件中。

因此,如果myProp在父组件中更改,则它将反映在孙组件中。(到现在为止还挺好)。

因此,在层次结构中,您无需执行任何操作,道具本质上就是被动的。

现在谈论上级

如果在grandChild组件中更改了myProp,它将不会反映在子组件中。您必须在child中使用.sync修饰符,并从grandChild组件发出事件。

如果myProp在子组件中更改,则不会反映在父组件中。您必须在父级中使用.sync修饰符并从子级组件发出事件。

如果在grandChild组件中更改了myProp,则它不会反映在父组件中(很明显)。您必须使用.sync修饰符child并从孙子组件中发出事件,然后在子组件中观察prop并在父组件使用.sync修饰符侦听更改时发出事件。

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

亲子

<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>

小孩

<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>

孙子

<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的尖叫警告

“避免直接更改道具,因为每当父组件重新渲染时,该值就会被覆盖。”

同样,正如我之前提到的,大多数开发人员都不会遇到此问题,因为这是一种反模式。这就是为什么您会收到此警告。

但是为了解决您的问题(根据您的设计)。我相信您必须解决以上问题(老实说,hack)。我仍然建议您应该重新考虑您的设计,使它不易出现错误。

希望对您有所帮助。

不知道您是否已解决它(以及我是否正确理解),但这是我的想法:

如果父级收到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>

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

对于两种方式的绑定,您必须使用.sync修饰符

<child :myprop.sync="text"></child>

更多细节...

并且您必须使用子组件中的watch属性来监听和更新任何更改

props: ['myprop'],
  watch: { 
    myprop: function(newVal, oldVal) { // watch it
      console.log('Prop changed: ', newVal, ' | was: ', oldVal)
    }
  }

我使用类似的计算属性:

    items:{
        get(){
            return this.resources;
        },
        set(v){
            this.$emit("update:resources", v)
        }
    },

在这种情况下,资源是一个属性:

props: [ 'resources' ]

对我来说,这是一种礼貌的解决方案,可以更改一个具体的道具并以此创建逻辑

在接收更改后,我将使用props和变量computed属性创建逻辑

export default {
name: 'getObjectDetail',
filters: {},
components: {},
props: {
  objectDetail: { // <--- we could access to this value with this.objectDetail
    type: Object,
    required: true
  }
},
computed: {
  _objectDetail: {
    let value = false
    // ...
    // if || do || while -- whatever logic
    // insert validation logic with this.objectDetail (prop value)
    value = true
    // ...
    return value 
  }
}

因此,我们可以在html渲染上使用_objectDetail

<span>
  {{ _objectDetail }}
</span>

或以某种方法:

literallySomeMethod: function() {
   if (this._objectDetail) {
   ....
   }
}

您可以使用监视模式来检测更改:

在原子级别上做所有事情。因此,首先要通过监视内部的内容来检查watch方法本身是否被调用。一旦确定要调用手表,请使用您的业务逻辑将其粉碎。

watch: { 
  myProp: function() {
   console.log('Prop changed')
  }
}

如果需要在接收更改后创建逻辑,则使用props和变量computed属性

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

        if (someValidation)
        ...
    }
}

如果myProp是对象,则通常不会更改它。因此,观看将永远不会被触发。之所以不能更改myProp的原因是,在大多数情况下,您只需设置myProp的某些键即可。myProp本身仍然是其中之一。尝试观看myProp的道具,例如“ myProp.a”,它应该可以工作。

监视功能应放在子组件中。不是父母。

@JoeSchr有一个很好的答案。如果您不希望'deep:true',这是另一种方法。

 mounted() {
    this.yourMethod();
    // re-render any time a prop changes
    Object.keys(this.$options.props).forEach(key => {
      this.$watch(key, this.yourMethod);
    });
  },
本文地址:http://javascript.askforanswer.com/ruhelingtingdaojudebianhua.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!