VueJs 2.0-`props '변경을 듣는 방법

VueJs 2.0-`props '변경을 듣는 방법

---

에서 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소품 변경시 소품을 실행할 수 있습니다 .

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를 감시 할뿐만 아니라 예를 들어 중첩 값을 사용하는 것입니다.props.myProp

이 확장 된 시계 옵션에 대한 자세한 내용은 여기 ( https://vuejs.org/v2/api/#vm-watch)를 참조 하십시오.

---

당신은 당신이 가지고있는 컴포넌트 계층 구조와 소품을 전달하는 방법을 이해해야합니다. 확실히 귀하의 경우는 개발자가 직면하지 않는 특별한 경우입니다.

부모 구성 요소 -myProp-> 자식 구성 요소 -myProp-> 손자 구성 요소

부모 구성 요소에서 myProp가 변경 되면 자식 구성 요소에도 반영 됩니다.

그리고 자식 구성 요소에서 myProp가 변경되면 손자 구성 요소에도 반영 됩니다.

따라서 myProp가 부모 구성 요소에서 변경되면 손자 구성 요소에 반영 됩니다. (여태까지는 그런대로 잘됐다).

따라서 계층 구조를 낮추면 아무것도 할 필요가 없으며 소품은 본질적으로 반응합니다.

이제 계층 구조에서 올라가는 것에 대해 이야기

grandChild 구성 요소에서 myProp가 변경 되면 자식 구성 요소에 반영되지 않습니다 . child에서 .sync 수정자를 사용해야하고 grandChild 컴포넌트에서 이벤트를 생성해야합니다.

하위 구성 요소에서 myProp가 변경 되면 상위 구성 요소에 반영되지 않습니다 . 부모에서 .sync 수정자를 사용해야하고 자식 구성 요소에서 이벤트를 생성해야합니다.

If myProp is changed in grandChild component it won't be reflected in the parent component (obviously). You have to use .sync modifier child and emit event from the grandchild component, then watch the prop in child component and emit an event on change which is being listened by parent component using .sync modifier.

Let's see some code to avoid confusion

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>

But after this you wont help notice the screaming warnings of vue saying

'Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.'

Again as I mentioned earlier most of the devs don't encounter this issue, because it's an anti pattern. That's why you get this warning.

But in order to solve your issue (according to your design). I believe you have to do the above work around(hack to be honest). I still recommend you should rethink your design and make is less prone to bugs.

I hope it helps.

---

Not sure if you have resolved it (and if I understand correctly), but here's my idea:

If parent receives myProp, and you want it to pass to child and watch it in child, then parent has to have copy of myProp (not reference).

Try this:

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

and in html:

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

actually you have to be very careful when working on complex collections in such situations (passing down few times)

---

for two way binding you have to use .sync modifier

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

more details...

and you have to use watch property in child component to listen and update any changes

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

---

I work with a computed property like:

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

Resources is in this case a property:

props: [ 'resources' ]

---

You can use the watch mode to detect changes:

Do everything at atomic level. So first check if watch method itself is getting called or not by consoling something inside. Once it has been established that watch is getting called, smash it out with your business logic.

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

---

if myProp is an object, it may not be changed in usual. so, watch will never be triggered. the reason of why myProp not be changed is that you just set some keys of myProp in most cases. the myProp itself is still the one. try to watch props of myProp, like "myProp.a",it should work.

---

The watch function should place in Child component. Not parent.

---

@JoeSchr has a good answer. here is another way to do this if you don't want 'deep: true'.

 mounted() {
    this.yourMethod();
    // re-render any time a prop changes
    Object.keys(this.$options.props).forEach(key => {
      this.$watch(key, this.yourMethod);
    });
  },

참고URL : https://stackoverflow.com/questions/44584292/vuejs-2-0-how-to-listen-for-props-changes