[javascript] Vue 2-Vue-warn 뮤팅 소품

Vue 패턴이 props위아래로 움직 events입니다. 간단하게 들리지만 사용자 컴포넌트를 작성할 때 잊어 버리기 쉽습니다.

Vue 2.2.0부터 v-model을 사용할 수 있습니다 ( 계산 된 속성 포함 ). 이 조합은 구성 요소 사이에 간단하고 깨끗하며 일관된 인터페이스를 만듭니다.

• props구성 요소에 전달 된 모든 항목 은 반응 상태로 유지됩니다 (즉, watch변경 사항이 감지 될 때 복제되지 않았거나 로컬 복사본을 업데이트하는 기능이 필요하지 않습니다 ).
• 변경 사항은 자동으로 부모에게 전달됩니다.
• 여러 레벨의 구성 요소와 함께 사용할 수 있습니다.

계산 된 속성을 사용하면 setter와 getter를 별도로 정의 할 수 있습니다. 이를 통해 Task컴포넌트를 다음과 같이 다시 작성할 수 있습니다.

Vue.component('Task', {
    template: '#task-template',
    props: ['list'],
    model: {
        prop: 'list',
        event: 'listchange'
    },
    computed: {
        listLocal: {
            get: function() {
                return this.list
            },
            set: function(value) {
                this.$emit('listchange', value)
            }
        }
    }
})  

모델 프로퍼티 정의 prop와 연관된 v-model및 이벤트의 변경에 출사한다. 그런 다음 다음과 같이 부모에서이 구성 요소를 호출 할 수 있습니다.

<Task v-model="parentList"></Task>

listLocal계산 재산권 부품 내에 간단하고 게터 세터 인터페이스를 제공한다 (전용 가변되는 것처럼 생각). 내에서 #task-template렌더링 할 수 listLocal있으며 반응 상태를 유지합니다 (즉, parentList변경하면 Task구성 요소 가 업데이트 됩니다). listLocalsetter (예 🙂 를 호출하여 음소거 할 수 this.listLocal = newList있으며 변경 사항이 부모에게 전달됩니다.

이 패턴의 장점 listLocal은 Task(의 v-model) 하위 구성 요소에 전달할 수 있으며 하위 구성 요소의 변경 사항이 최상위 구성 요소로 전파된다는 것입니다.

예를 들어, EditTask작업 데이터를 수정하기위한 별도의 구성 요소가 있다고 가정합니다. 동일 v-model하고 계산 된 속성 패턴 을 사용하여을 사용하여 listLocal구성 요소에 전달할 수 있습니다 v-model.

<script type="text/x-template" id="task-template">
    <div>
        <EditTask v-model="listLocal"></EditTask>
    </div>
</script>

만약 EditTask이 방출이 적절하게 호출 변화 set()에 listLocal최고 수준에 이벤트를 전파함으로써합니다. 마찬가지로 EditTask구성 요소는을 사용하여 다른 자식 구성 요소 (예 : 양식 요소)를 호출 할 수도 있습니다 v-model.

답변

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    computed: {
        listJson: function(){
            return JSON.parse(this.list);
        }
    }
});

<grid :list.sync="list"></grid>

props: ['list'],
methods:{
    doSomethingOnClick(entry){
        let modifiedList = _.clone(this.list)
        modifiedList = _.uniq(modifiedList) // Removes duplicates
        this.$emit('update:list', modifiedList)
    }
}

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.$emit('update:list', JSON.parse(this.list))
    }
});
new Vue({
    el: '.container'
})

Vue.component('task', {
    template: ´<ul>
                  <li v-for="item in mutableList">
                      {{item.name}}
                  </li>
              </ul>´,
    props: ['list'],
    data: function () {
        return {
            mutableList = JSON.parse(this.list);
        }
    },
    watch:{
        list: function(){
            this.mutableList = JSON.parse(this.list);
        }
    }
});