Question

如何从医生组件中访问医生属性？

Vue.component('specialists', {
    template: `
    <div>
        <div class="list-group-item title">
            &raquo; {{ name }}
        </div>
        <doctor class="list-group-item" v-for="doctor in doctors">
            <a href="#" class="list-group-item-heading">
                {{ doctor.full_name }}
            </a>
        </doctor>
    </div>
    `,

    props: {
        name: {
            default: '',
        },
    },

    data: function() {
        return {
            algoliaClient: null,
            algoliaIndex: null,
            doctors: [],
        };
    },

    created: function() {
        this.algoliaClient = this.$parent.algoliaClient;
        this.algoliaIndex = this.algoliaClient.initIndex('medical_doctors');
    },

    mounted: function() {
        this.getDoctors();
    },

    methods: {
        getDoctors: function() {
            this.search(this.name);
        },

        search: function(input) {
            var _this = this;
            this.algoliaIndex.search(this.name, function(err, hits) {
                _this.setDoctors(hits.hits);
            });
        },

        setDoctors: function(data) {
            this.doctors = data;
        },
    },
});

// my doctor component
Vue.component('doctor', {
    template: `
        <div><slot></slot></div>
    `,

    data: function() {
        return {
            doctor: null, // here. how can i pass value to it? 
        };
    },
});

如何从我的专家组件访问doctor属性？我尝试从专家组件访问this.$children，但子项为空

Answer 1

我尝试这样的事情：

Vue.component('specialists', {
    template: `
    <div>
        <div class="list-group-item title">
            &raquo; {{ name }}
        </div>
        <doctor class="list-group-item" v-for="doctor in doctors" :doctor="doctor">
            <a href="#" class="list-group-item-heading">
                {{ doctor.full_name }}
            </a>
        </doctor>
    </div>
    `,

    props: {
        name: {
            default: '',
        },
    },

    data: function() {
        return {
            algoliaClient: null,
            algoliaIndex: null,
            doctors: [],
        };
    },

    created: function() {
        this.algoliaClient = this.$parent.algoliaClient;
        this.algoliaIndex = this.algoliaClient.initIndex('medical_doctors');
    },

    mounted: function() {
        this.getDoctors();
    },

    methods: {
        getDoctors: function() {
            this.search(this.name);
        },

        search: function(input) {
            var _this = this;
            this.algoliaIndex.search(this.name, function(err, hits) {
                _this.setDoctors(hits.hits);
            });
        },

        setDoctors: function(data) {
            this.doctors = data;
        },
    },
});

// my doctor component
Vue.component('doctor', {
    template: `
        <div><slot></slot></div>
    `,

    props: {
        doctor: {
            default: '',
        }
    }
});

在父项的for循环中传递:doctor="doctor" 并将医生添加到子组件中的道具

 props: {
    doctor: {
        default: '',
    },
},

Vue组件：如何将数据从父级传递给子级

1 个答案: