구성 요소 간의 VueJs v-모델 및 데이터 바인딩

구성 요소 간의 VueJs v-모델 및 데이터 바인딩

vuejs의 데이터 바인딩 방법에 문제가 있습니다.양식 레이아웃을 처리하는 상위 Vue.component와 다른 입력 그룹을 처리하는 하위 vue.component가 있습니다.나중에 폼을 제출할 때 부모 컴포넌트와 동기화할 자식 컴포넌트의 데이터를 얻는 데 어려움이 있습니다.

현재 다음과 같은 파일이 있습니다.

var title = "";
Vue.component('create_new_entry', {
    template: '<div><div class="row"><h1 v-on:click="test()">{{title}}</h1><div class="col-md-12"><section_title></section_title></div></div></div>',
    data    : function() {
        return {
            title: title
        };
    },
});
Vue.component('section_title', {
    template: '<div><h1 v-on:click="test()">{{title}}</h1><input type="text" class="form-control" v-model="title"></div>',
    data    : function() {
        return {
            title: title
        };
    },
    methods : {
        test: function() {
            console.log(this);
        }
    }
});

어디서부터 잘못됐는지 모르겠고, 문서를 작성하려고 해도 데이터 바인딩 및 업데이트 방법에 대해 여전히 어려움을 겪고 있습니다.

각 컴포넌트에 1개씩 완전히 다른2개의 필드를 선언합니다.이 필드들은 같은 이름을 공유하고 있는 것 이외에는 다른 필드가 없습니다.Vue는 이러한 필드를 2개의 개별 필드로 취급하고 있으며, 한쪽이 변경되면 다른 한쪽은 변경되지 않습니다.필드는 컴포넌트인스턴스 내부 전용 필드입니다.

공유 상태는 소품으로 하위 구성 요소에 전달되어야 하며 이벤트로 상위 구성 요소에 전달되어야 합니다.여기에는 몇 가지 방법이 있는데, 가장 간단한 방법은 소품 및 이벤트를 추가하는 것입니다.더 복잡한 방법은 vuex와 같은 상태 관리 도구를 사용하는 것입니다.https://github.com/vuejs/vuex

다음은 소품 및 이벤트를 사용한 간단한 예입니다.

프로포절 문서: https://vuejs.org/v2/guide/components.html#Props

이벤트 매뉴얼: https://vuejs.org/v2/guide/components.html#Custom-Events

var title = "";
Vue.component('create_new_entry', {
    template: '<div><div class="row"><h1 v-on:click="test()">{{title}}</h1><div class="col-md-12"><section_title :title="title" @title-changed="changeTitle"></section_title></div></div></div>',
    data    : function() {
        return {
            title: title
        };
    },
    methods: {
        changeTitle(newTitle) {
            this.title = newTitle;
        }
    }
});
Vue.component('section_title', {
    template: '<div><h1 v-on:click="test()">{{title}}</h1><input type="text" class="form-control" v-model="innerTitle"></div>',
    props: ['title'],
    data    : function() {
        return {
            innerTitle: this.title
        };
    },
    methods : {
        test: function() {
            console.log(this);
        }
    },
    watch: {
        title(val){
            this.innerTitle = val;
        },
        innerTitle(val) {
            this.$emit('title-changed', val);
        }
    }
});

상위 구성 요소는 제목 구성 요소를 하위 구성 요소로 전달하여 액세스 권한을 가집니다.할 수 을 로컬 에 복사합니다.innerTitle . 。input는 자포 is is is is is is is the the the the the the the the 에 결합되어 .innerTitlev-model 을 합니다.가 innerTitle있을 .title-changed 컴포넌트는 .title-changed이벤트 및 이벤트가 발생할 때마다 부모는 제목 필드를 해당 새 값으로 업데이트합니다.

.title부모 타이틀 값이 다른 이유로 변경되었을 경우 자녀 컴포넌트가 부모의 새로운 값에 맞게 내부 상태를 갱신할 수 있도록 합니다.

앞에서 설명한 바와 같이 Vuex를 사용하거나 다른 Vue 인스턴스를 버스로 사용할 수도 있습니다.https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

언급URL : https://stackoverflow.com/questions/47993509/vuejs-v-model-and-data-binding-between-components