vue实现js调用式组件

Zero0985

已于 2023-05-12 16:40:19 修改

阅读量809

点赞数 1

文章标签： javascript vue.js 前端

于 2023-04-25 11:11:53 首次发布

本文链接：https://blog.csdn.net/qq_41742961/article/details/130360197

版权

本文介绍了如何在Vue.js中创建一个可以被JavaScript调用的组件。首先，详细阐述了如何编写一个名为DeleteDialog的组件。接着，通过创建构造器并将组件挂载到Vue原型上，使得该组件可以在全局范围内使用。最后，在A.vue组件中，展示了如何实例化DeleteDialog组件并将其挂载到DOM元素，以便在A组件中调用删除功能。

摘要由CSDN通过智能技术生成

1.写好一个组件
DeleteDialog.vue

<template>
	<el-dialog :title="$options.title" width="30%"  :visible.sync="dialogVisible" @close="cancel" v-if="dialogVisible">
		<div class="container">
			<img src="@/assets/logo/remind.png" alt="" />
			<span>{
  { msg }}</span>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button class="cancelbtn" @click="cancel">Cancel</el-button>
			<el-button class="querybtn" @click="handleDelete">OK</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: 'DeleteDialog',
    data() {
        return {
            dialogVisible: true,
            msg: this.$options.msg || 'Are you sure to delete the selected records?&