element 中 el-dialog 在不同的文件中使用

在实际中工作，我们经常需要使用 el-dialog 来做一个弹框的功能。最常见的就是在父组件中点击一个按纽，然后弹出一个框。而这个框就是子组件。同时，父子组件是分布在不同的文件中。

<!--父组件-->
<template>  
	<div>  
		<button @click="dialogVisible = true">打开对话框</button>  
		<ChildDialog v-model="dialogVisible" />  
	</div>  
</template>  
  
<script>  
import ChildDialog from './ChildDialog.vue';  
  
export default {
      
        
  components: {
      
        
    ChildDialog  
  },  
  data() {
      
        
    return {
      
        
      dialogVisible: false  
    };  
  }  
};  
</script>

<!--子组件-->
<template>  
  <el-dialog  
    v-bind="$attrs"  
    v-on="$listeners"  
    title="Dialog Title"  
  >  
    <!-- 对话框内容 -->  
  </el-dialog>  
</template>  
  
<script>  
export default {
      
        
  inheritAttrs: false, // 这将阻止默认的属性绑定（class 和 style 除外），因为我们已经使用了 $attrs  
  // 不需要额外的 props、data 或 watch，因为 $attrs 已经包含了所有需要的东西  
};  
</script>

核心的代码就是这样，大家可以放到自己的项目中直接使用即可。