vue3父子通信

最新推荐文章于 2024-10-10 20:59:20 发布

前端小菜鸟也有人起

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量147

点赞数 2

文章标签：前端 javascript vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_63730900/article/details/141030533

版权

父子：

父传递

        <DeviceTable
        :tableData="tableData"
       :options3="options3"
       :options4="options4"
        />

子接受

const props = defineProps(['tableData', 'options3', 'options4']);

-----------------------------------------------------------------------------------------------------------------

子父：

子传递

const emits=defineEmits(['selectedRows'])
const selectedRows = ref([]);

const handleSelectionChange = (val) => {
    console.log(val);
    selectedRows.value = val
    emits('selectedRows',selectedRows.value)
}

父接收

        <DeviceTable
        :tableData="tableData"
       :options3="options3"
       :options4="options4"
       @selectedRows='handleSelectedRows'
        />
const selectedRows = ref([]); // 在父组件中定义响应式变量 selectedRows

const handleSelectedRows = (rows) => {
  console.log('Received selected rows:', rows);
  selectedRows.value = rows; // 更新父组件中的 selectedRows
}