父组件向子组件传递数据,子组件展示并更新 element-ui

Posted jijizhazha

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了父组件向子组件传递数据,子组件展示并更新 element-ui相关的知识,希望对你有一定的参考价值。

<el-select v-model="currentAuditProcess" placeholder="请选择"
    @click.native="clickSearchAuditProcessList">
    <el-option v-for="item in auditProcesses"
     :key="item.id" :label="item.name" :value="item.id"></el-option>
 </el-select>

export default Vue.extend({
    props:{
        engineFormData: {}
    },
    data(){
        currentAuditProcess: null,
        auditProcesses: [],
    }

    watch:{
        engineFormData: function (newValue, oldValue) {
                if (newValue){
                    this.auditProcesses = [];
                    this.auditProcesses.push(newValue.audit_process);
                    this.currentAuditProcess =newValue.audit_process.id;

                }
        }
    },
    methods:{
        clickSearchAuditProcessList(){
            this.searchRemoteAuditProcesses();
        },

        async searchRemoteAuditProcesses() {
            const result = (await this.$apollo.query({
                query: AuditProcessList,
                variables: { application: this.application }
            })).data.auditProcessList;
            this.auditProcesses = result.auditProcessList;
        },
    }

})

以上是关于父组件向子组件传递数据,子组件展示并更新 element-ui的主要内容,如果未能解决你的问题,请参考以下文章

Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

Vue中,父组件向子组件传值

[React] 子组件向父组件通信:回调函数

vue组件-#构成组件-父组件向子组件传递数据

vue父组件向子组件传值

Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据