<script>

import HelloWorld from "../components/HelloWorld.vue";

export default {

components: {

HelloWorld,

},

三、页面显示模式（编辑和查看）逻辑

1.子组件接受父组件传值（type：编辑、查看）

不能直接写 disable=“”，要先定义 type 的 data 和 methods

init(type,row)

[init] 方法的作用：根据不同的操作类型（查看、编辑或添加），初始化组件的状态，并准备显示相关的 UI 元素。

[init] 接收两个参数：[type] 和 [row]。

[type] 参数用于指定操作的类型，而 [row] 参数包含了一些与当前操作相关的数据。

代码中注释掉的一行 // this.ruleForm = row; 展示了一个未启用的逻辑，即直接将 row 的值赋给 ruleForm 属性。然而，实际使用的逻辑更加细致。它通过一个 if 语句检查 type 属性的值是否为 view 或 edit。如果是，说明当前操作是查看或编辑，此时需要将 row 的数据赋给 ruleForm 属性以便使用。

这里使用了 JavaScript 的解构赋值语法 { ...row }，这意味着创建了 row 的一个浅拷贝并赋值给 ruleForm，而不是直接使用 row 对象，这样做可以避免直接修改到原始的 row 数据。

methods: {

init(type, row) {

console.log(type);

this.type = type;

console.log("type", this.type);

// this.ruleForm = row;

// 当type为view或edit时，将row的值赋给ruleForm；当type为add时，不读row的值

if (["view", "edit"].includes(this.type)) {

// 解构，只拿ruleForm的row部分

this.ruleForm = { ...row };

}

this.dialogVisible = true;

},

先打印 row 参数，看传值成功没

然后把 row 在 init 函数中给他

子组件中需要传值 handleview(scope .row)

2.父组件给子组件传值

// 在 ChildComponent 组件中

methods: {

init(mode, data) {

// 根据 mode 和 data 参数初始化组件

}

}

这种模式允许父组件控制子组件的行为，通过直接调用子组件的方法来实现。

3.更新数据

两种方法：

①拿到当前行的索引index，传过去，再传回来，改数组的值

②用init，但是需要对vue生命周期比较熟悉

四、小结

希望本文对你有所帮助。如果你有任何疑问或需要进一步的帮助，请在评论区留言。祝你开发顺利！

hello，我是 是Yu欸 。如果你喜欢我的文章，欢迎三连给我鼓励和支持：👍点赞 📁 关注 💬评论，我会给大家带来更多有用有趣的文章。

原文链接 👉 ，⚡️更新更及时。

欢迎大家添加好友交流。