网站开发未来发展趋势html代码大全初学者必备

在实际中工作，我们经常需要使用 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>

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