[javascript] ‘소품’변경 사항을 듣는 방법

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

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

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

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

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

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

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

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

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

grandChild 컴포넌트에서 myProp가 변경되면 반영되지 않습니다 되면 부모 구성 요소에 분명히 . .sync 수정 자 자식을 사용하고 손자 구성 요소에서 이벤트를 생성 한 다음 자식 구성 요소의 prop을보고 .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>

손자. 뷰

<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를 직접 변경하지 마십시오.’

앞서 언급했듯이 대부분의 개발자는 안티 패턴이기 때문에이 문제가 발생하지 않습니다. 그래서이 경고가 나타납니다.

그러나 (디자인에 따라) 문제를 해결하기 위해. 위의 해결 방법을 사용해야한다고 생각합니다 (정직하게 해킹하십시오). 나는 여전히 당신이 당신의 디자인을 다시 생각하고 버그가 덜 발생하는 것이 좋습니다 권장합니다.

도움이 되길 바랍니다.

답변

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

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

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

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