vue2、a-modal自定义组件v-modal

最新推荐文章于 2024-12-17 08:55:00 发布

原创最新推荐文章于 2024-12-17 08:55:00 发布 · 602 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文介绍了如何在Vue应用中使用父子组件交互，展示了一个父组件通过`v-if`和`v-model`控制子组件`ModalComp`的显示与隐藏，并通过props传递数据和处理当前行ID的示例。

父组件

<ModalComp  :currentRow="currentRow" v-if="visible" v-model="visible" />

<script>
import ModalComp from "./components/ModalComp.vue";
export default {
  components: { ModalComp },
  data() {
    return {
	  visible: false,
	  currentRow: null,
    }
  },
}
</script>

子组件

<template>
  <a-modal :visible="value" @cancel="$emit('input', false)" class="modal1" :footer="null">
	内容
  </a-modal>
</template>

<script>
export default {
  name: 'ModalComp',
  props: {
    value: {
      type: Boolean,
      required: true
    },
    currentRow: {
      type: Object,
      required: true
    },
  },
  data() {
    return {

    }
  },
  created() {
	if(this.currentRow.id) {
	  // 处理
	}
  }
}
</script>