美文网首页
子组件修改props参数

子组件修改props参数

作者: 丿任曦 | 来源:发表于2021-12-31 15:26 被阅读0次
    父组件
    <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>
    

    相关文章

      网友评论

          本文标题:子组件修改props参数

          本文链接:https://www.haomeiwen.com/subject/eowgqrtx.html