Vue模态组件在父组件中使用答案

【问题标题】：Vue modal component using in parent componentVue模态组件在父组件中使用
【发布时间】：2023-03-26 23:47:01
【问题描述】：

我正在使用 Vue 构建简单的模态组件。我想在父组件中使用这个组件并能够从父组件切换它。

这是我现在的模态组件代码：

<script>
export default {
	name: 'Modal',
	data() {
		return {
			modalOpen: true,
		}
	},
	methods: {
		modalToggle() {
			this.modalOpen = !this.modalOpen
		},
	},
}
</script>

<template>
	<div v-if="modalOpen" class="modal">
		<div class="body">
			body
		</div>
		<div class="btn_cancel" @click="modalToggle">
			<i class="icon icon-cancel" />
		</div>
	</div>
</template>

我使用 v-if 来切换渲染，它与我在模态组件中创建的按钮一起使用。

但是我的问题是：我不知道如何使用父组件中的简单按钮来切换它。我不知道如何从 modal 组件访问 modalOpen 数据

【问题讨论】：

标签： vue.js components

【解决方案1】：

好的，让我们试着把它做好。我建议制作一个成熟的组件，并在父组件或其他包含中使用 v-model 来控制模态窗口的打开和关闭。

1) 我们需要在子组件的“props”中声明 prop - “value”。

<script>
export default {
    name: 'Modal',
    props: ["value"],
    data() {
        return {
            modalOpen: true,
        }
    },
    methods: {
        modalToggle() {
            this.modalOpen = !this.modalOpen
        },
    },
}
</script>

2) 替换您的“modalToggle”：

modalToggle() {
  this.$emit('input', !this.value);
}

3) 在父组件或其他包含声明“modal=false”var 并在组件 v-model="modal" 和任何用于 modal var 的控制按钮上使用。

总结

<template>
    <div v-if="value" class="modal">
        <div class="body">
            body
        </div>
        <div class="btn_cancel" @click="modalToggle">
            <i class="icon icon-cancel" />
        </div>
    </div>
</template>

<script>
export default {
  name: "Modal",
  props: ["value"],
  methods: {
    modalToggle() {
      this.$emit("input", !this.value);
    }
  }
};
</script>

示例：

Vue.component('modal', {
  template: '<div v-if="value" class="modal"><div class="body">modal body</div><div class="btn_cancel" @click="modalToggle">close modal<i class="icon icon-cancel" /></div></div>',
  props: ["value"],
	methods: {
		modalToggle() {
      this.$emit('input', !this.value);
		}
	}
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app',
  data:() =>({
  modal: false
  }),
  methods: {
  openModal() {
  this.modal = !this.modal;
  }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div @click="openModal">Btn modal</div>
  
  <modal v-model="modal"></modal>
</div>

【讨论】：

感谢您的详细解答。现在它可以按需要工作。我有一个侧面问题。短暂延迟后打开模式的正确方法是什么？是否使用 setInterval() 之类的函数或类似的函数？
取决于目的。你使用 setInterval() 的目的是什么？
我想在我的登陆页面加载后，在短暂的延迟（例如 5 秒）后弹出我的模态组件，我也想弹出一次，而不是在每个页面重新加载时弹出
我认为您可以使用 setTimeout (developer.mozilla.org/en-US/docs/Web/API/…) 代替 setInterval 进行一次启动。之后您需要存储状态，您可以使用 localStorage (developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)。您也可以在页面上使用钩子 created() 并在重新加载页面后检测状态。

【解决方案2】：

对于您当前的实现，我建议您使用 refs https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

所以在你的父组件中添加ref="child"到模态（子）组件，然后通过调用this.$refs.child.modalToggle()打开你的模态

【讨论】：

【解决方案3】：

您可以使用“激活器”插槽
您可以在子级上使用 ref="xxx" 并从父级访问它

【讨论】：