vue弹窗实现父子通信

Vue弹窗实现父子组件通信

在Vue中，弹窗组件通常作为子组件存在，需要通过特定方法实现与父组件的通信。以下是几种常用方式：

使用Props传递数据

父组件通过props向子组件传递数据，子组件接收并使用这些数据。

父组件代码：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <modal :visible="showModal" :title="modalTitle" @close="showModal = false"/>
  </div>
</template>

<script>
import Modal from './Modal.vue'

export default {
  components: { Modal },
  data() {
    return {
      showModal: false,
      modalTitle: '提示信息'
    }
  }
}
</script>

子组件(Modal)代码：

<template>
  <div v-if="visible">
    <h2>{{ title }}</h2>
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: String
  }
}
</script>

使用自定义事件

子组件通过$emit触发事件，父组件监听这些事件并执行相应操作。

子组件中触发事件：

<template>
  <div>
    <button @click="handleConfirm">确认</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleConfirm() {
      this.$emit('confirm', { data: 'some data' })
    }
  }
}
</script>

父组件监听事件：

<template>
  <modal @confirm="handleConfirm"/>
</template>

<script>
export default {
  methods: {
    handleConfirm(payload) {
      console.log(payload.data) // 输出'some data'
    }
  }
}
</script>

使用v-model实现双向绑定

通过v-model简化props和事件的传递，适用于需要双向绑定的场景。

子组件代码：

<template>
  <div v-if="value">
    <input v-model="inputValue">
    <button @click="handleClose">关闭</button>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleClose() {
      this.$emit('input', false)
    }
  }
}
</script>

父组件使用：

<template>
  <modal v-model="showModal"/>
</template>

使用Provide/Inject

对于深层嵌套的组件，可以使用provide/inject进行通信。

父组件提供数据：

<script>
export default {
  provide() {
    return {
      modalData: this.sharedData
    }
  },
  data() {
    return {
      sharedData: '共享数据'
    }
  }
}
</script>

子组件注入数据：

<script>
export default {
  inject: ['modalData'],
  mounted() {
    console.log(this.modalData) // 输出'共享数据'
  }
}
</script>

使用Vuex状态管理

对于复杂应用，使用Vuex管理弹窗状态更为合适。

Vuex store示例：

const store = new Vuex.Store({
  state: {
    modalVisible: false
  },
  mutations: {
    setModalVisible(state, visible) {
      state.modalVisible = visible
    }
  }
})

组件中使用：

<template>
  <button @click="openModal">打开弹窗</button>
  <modal v-if="$store.state.modalVisible" @close="closeModal"/>
</template>

<script>
export default {
  methods: {
    openModal() {
      this.$store.commit('setModalVisible', true)
    },
    closeModal() {
      this.$store.commit('setModalVisible', false)
    }
  }
}
</script>

根据项目复杂度选择合适的方法，简单场景使用props/events即可，复杂场景建议使用Vuex管理状态。