vue3中$attrs的变化与inheritAttrs的使用( 二 ) _生活百科

vue2中 v-bind="$attrs" 和 $listeners//子组件.vue<template><div><el-button type="primary" @click="dialogVisible = true">点击打开 </el-button><el-dialogv-bind="$attrs"v-on="$listeners" :visible.sync="dialogVisible"width="30%" :before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="dialogVisible = false">确定</el-button></span></el-dialog></div></template><script>export default {inheritAttrs: false, //不让属性直接渲染在根节点上data() {return {dialogVisible: false};},methods: {handleClose(done) {this.$confirm('确认关闭？').then(() => {done();}).catch(() => { });}}};</script>

文章插图

//父组件.vue<template><div><LianCom title="父组件给的标题" @open="openHandler"></LianCom></div></template><script>import LianCom from "../components/LianCom.vue"export default {components: {LianCom},methods:{openHandler() {console.log('可以直接注册事件 ， 因为 v-on="$listeners"会接收除了.native的原生事件')}}}</script>

vue3v-bind="$attrs" 会接收属性和事件

//子组件<template><el-button text @click="dialogTableVisible = true"> 打开 </el-button><el-dialog width="600px" v-bind="$attrs" v-model="dialogTableVisible" title="我是标题"><div>我值弹窗中的内容</div></el-dialog></template><script lang="ts">export default {inheritAttrs: false,}</script><script lang="ts" setup>import {ref } from 'vue'const dialogTableVisible = ref(false)</script>ps:我们没有向上抛出任何事件 。但是父组件可以调用 Element Plus 中对话框中的内置方法 。但是父页面中可以 注册 Element Plus 中对话框中的内置方法 。

// 父组件<template><div class="father"><TestCom @close="closeHandler" :before-close="beforeclose" title="父组件给的标题" aa="我是aa" bb="我是bb"></TestCom></div></template><script setup lang="ts">import { ElMessageBox } from 'element-plus'import TestCom from "../../components/TestCom.vue"// Dialog 关闭的回调const closeHandler = () => {console.log('Dialog 关闭的回调')}/*before - close 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用 。如果你在 footer 具名插槽里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before - close 的相关逻辑 。关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候.*/const beforeclose = (done: () => void) => {ElMessageBox.confirm('Are you sure to close this dialog?').then(() => {console.log('用户点击了确定')done()}).catch(() => {console.log('用户点击了取消')})}</script>