子组件修改props参数

父组件
<template>
  <div class="organ">
    <groupModal ref="groupModal" :modalAdd.sync="modal" :modalParams="modalParams" @define="define"></groupModal>
    <Button @click="open">打开弹窗</Button>
  </div>
</template>
<script>
import groupModal from "./components/groupModal.vue";
export default {
  components: {
    groupModal
  },
  data() {
    return {
      modal: false,
      modalParams:{
        type: 3,
        modalTitle: '',
        group_id: ''
      },
    };
  },
  created() {
  },
  methods: {
    open(){
      this.modal = true
    }
  },
};
</script>
子组件
<template>
    <Modal v-model="modal" :title="modalParams.modalTitle" :mask-closable="false" :closable="false" @on-visible-change="visibleChange">
      <div>content</div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancel">取消</Button>
        <Button type="primary" size="large" @click="define('formData')">确定</Button>
      </div>
    </Modal>
</template>
<script>
export default {
  props:{
    modalParams: Object,
    modal: Boolean
  },
  data() {
    return {
    };
  },
  created() {
  },
  methods: {
    cancel(){
      //修改props的modal 并修改父组件传入的modal值   也可以直接在@click  里写  @click="$emit('update:modal', false)"
      this.$emit('update:modal', false)   
    }
  },
};
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容