javascript - 重构vue单文件组件-6ren

javascript - 重构vue单文件组件

转载作者：行者123 更新时间：2023-11-30 14:24:46

24

4

随着我的单个文件组件越来越大，我尝试对其进行一些重构。结果我有几个对话框使 .vue 文件变得很大(800 行以上)。所以为了保持组件干净，我试图将对话框变成专用的子组件(mydialog)。我正在使用 vuetify(不需要熟悉 vuetify)。

我在父组件中有一个启用对话框的按钮。我将 dialog 属性发送到子组件，然后子组件附加到对话框的 v-model。问题是，它只在第一次有效。那是因为当我点击 close 按钮时，它会将 dialog 的值更改为 false 并且它仍然是 false 永远，因为子组件与父组件失去了联系。在这种情况下，我该如何解决？

这是片段:

Vue.component('mydialog', {
  props:{
    dialog: {
      type: Boolean,
      default: false
    }
  },

  template: `
<div class="text-xs-center">
    <v-dialog
      v-model="dialog"
      width="500"
    >

      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          A Dialog
        </v-card-title>

        <v-card-text>
          Lorem ipsum dolor sit amet,
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog = false"
          >
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
`,
  data: function() {
    return {
      // dialog: false,
    }
  }

});

new Vue({
  el: '#app',
  data: {
    dialog: false
  }

});

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.css" />
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <v-btn color="red lighten-2" dark @click="dialog=true">Click Me</v-btn>
      <mydialog :dialog="dialog"></mydialog>
    </v-app>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script>
</body>

</html>

最佳答案

您的组件通信有点不正常:基本上您的对话框没有通知应用程序组件它已关闭。以下两个更改启用了模态和应用程序之间的上游通信:

在 app 模板中:

  <mydialog :dialog.sync="dialog"></mydialog>

在 mydialog Controller 中:

data: function() {
    return {
      dialog$: false,
    };
  },
  methods: {
    onClose() {
      this.dialog$ = false;
      this.$emit('update:dialog', this.dialog$);
    },
  },
  watch: {
    dialog: {
      immediate: true,
      handler() {
        this.dialog$ = this.dialog;
      },
    },
  }

第一个更改是让 app 组件监听 mydialog 的 dialog 属性的更新。

在 mydialog 中，我添加了一个数据属性 dialog$，它反射(reflect)了 dialog Prop (因为 Prop 被认为是常量，不应更改) .观察者负责 dialog 上的下游更新更新 dialog$。 onClose 方法会在对话框关闭时更新 dialog$ 并向订阅者(特别是 app)发送更新。

Vue.component('mydialog', {
  props:{
    dialog: {
      type: Boolean,
      default: false
    }
  },

  template: `
<div class="text-xs-center">
    <v-dialog
      v-model="dialog$"
      width="500"
    >

      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          A Dialog
        </v-card-title>

        <v-card-text>
          Lorem ipsum dolor sit amet,
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="onClose"
          >
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
`,
  data: function() {
    return {
      dialog$: false,
    };
  },
  methods: {
    onClose() {
      this.dialog$ = false;
      this.$emit('update:dialog', this.dialog$);
    },
  },
  watch: {
    dialog: {
      immediate: true,
      handler() {
        this.dialog$ = this.dialog;
      },
    },
  }
});

new Vue({
  el: '#app',
  data: {
    dialog: false
  },
  template: `
    <v-app id="inspire">
      <v-btn color="red lighten-2" dark @click="dialog=true">Click Me</v-btn>
      <mydialog :dialog.sync="dialog"></mydialog>
    </v-app>
  `,

});

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.css" />
</head>

<body>
  <div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script>
</body>

</html>

正如@raina77ow 所提到的，您还可以使用event bus 解决此类问题。但在这种情况下没有必要。

关于javascript - 重构vue单文件组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52121180/

24

4

0

文章推荐： javascript - JS 中的 "translating"{ ...props }

文章推荐： javascript - 函数不返回值

文章推荐： c - 如何在列表项中保存字符串？ (C)

java数据结构基础:单,双向链表
单向链表单向链表比顺序结构的线性表最大的好处就是不用保证存放的位置，它只需要用指针去指向下一个元素就能搞定。单链表图解图画的比较粗糙，简单的讲解一下：上面四个长方形，每个长方
c - 单 socket 多线程接收器
使用TCP，我正在设计一些类似于next的程序。客户端在许多线程中的接收正在等待一台服务器的发送消息。但是，这是有条件的。 recv正在等待特定的发送消息。例如客户 thread 1: recv
dns - 是否可以拥有一个(单)字符顶级域名？
我正在编写正则表达式来验证电子邮件。唯一让我困惑的是: 顶级域名可以使用单个字符吗？(例如:lockevn.c) 背景:我知道顶级域名可以是 2 个字符到任意字符(.uk、.us 到 .canon、.
Symfony2 单 Controller 多路由
是否可以在单个定义中定义同一 Controller 的多个路由？例如: 我想要一个单一的定义 /, /about, /privacy-policy 使用类似的东西 _home: pat
ios - 单 View 应用程序具有无法更改的黑色背景
我正在使用 objective-c开发针对 11.4 iOS 的单 View 应用程序，以及 Xcode版本是 9.4.1。创建后有Main.storyboard和LaunchScreen.stor
C - 单 shell 管道实现不断在终端中挂起
我一直在尝试在 shell 程序中实现管道结构，如果我执行简单的命令(例如“hello | rev”)，它就可以工作但是当我尝试执行“head -c 1000000/dev/urandom | wc
MySQL 单 DISTINCT 列
此表包含主机和接口(interface)列UNIQUE 组合* 编辑:这个表也有一个自动递增的唯一 ID，抱歉我应该在之前提到这个 ** | host.... | interface..... |
c++ - 单 channel 图像的滑动窗口标准过滤器
我想将具有固定补丁大小的“std filter”应用于单 channel 图像。也就是说，我希望 out[i,j] 等于 img[i,j] 附近的像素值的标准值。对于那些熟悉 Matlab 的人，
java - RxJavas 单。它的连接方法在哪里？
假设我想进行网络调用并使用 rx.Single，因为我希望只有一个值。我如何应用replay().autoConnect() 这样的东西，这样当我从多个来源订阅时网络调用就不会发生多次？我应该使用
c++ - 单 channel 平均值
我将图像从 rgb 转换为 YUV。现在我想单独找到亮度 channel 的平均值。你能告诉我如何实现这一目标吗？此外，有没有办法确定图像由多少个 channel 组成？最佳答案你可以这样做: #
scala - 单 token 前瞻的性能损失是多少？
在比较Go和Scala的语句结束检测时，我发现Scala的规则更丰富，即: A line ending is treated as a semicolon unless one of the foll
verilog - 单(＆)和双(&&)＆二进制运算符之间有什么区别？
在IEEE 1800-2005或更高版本中，&和&&二进制运算符有什么区别？它们相等吗？我注意到，当a和b的类型为bit时，这些coverpoint定义的行为相同: cp: coverpoint a
flutter - 单 View flutter 的提供者
我正在使用Flutter的provider软件包。我要实现的是为一个 View 或页面提供一个简单的提供程序。因此，我在小部件中尝试了以下操作: Widget build(BuildContext c
openmp - cython openmp 单，屏障
我正在尝试在 cython 中使用 openmp。我需要在 cython 中做两件事: i) 在我的 cython 代码中使用 #pragma omp single{} 作用域。 ii) 使用#pra
javascript - 替换函数内的 Espace 单/双引号
我正在尝试从转义字符字符串中删除单引号和双引号。它对单引号 ' 或双自动 " 不起作用。请问有人可以帮忙吗？ var mysting = escapedStr.replace(/^%22/g, '
openmp - cython openmp 单，屏障
我正在尝试在 cython 中使用 openmp。我需要在 cython 中做两件事: i) 在我的 cython 代码中使用 #pragma omp single{} 作用域。 ii) 使用#pra
encryption - ANT+ 单 channel 加密示例
我正在使用 ANT+ 协议(protocol)，将智能手机与 ANT+ USB 加密狗连接，该加密狗通过 SimulANT+ 连接到 PC。 SimulANT+ 正在模拟一个心率传感器，它将数据发送到
multithreading - 单/多线程 (OpenMP) 模式下计算精度的差异
有人可以解释/理解单/多线程模式下计算结果的不同吗？这是一个大约的例子。圆周率的计算: #include #include #include const int itera(100000000
c# - OpenGL - 单 channel 立方体贴图不产生任何输出
我编写了一个粗略的阴影映射实现，它使用 6 个不同的 View 矩阵渲染场景 6 次以创建立方体贴图。作为优化，我正在尝试使用几何着色器升级到单 channel 方法，但很难从我的着色器获得任何输出
javascript - 单 SPA AngularJS 中断父应用程序的路由
尝试使用 Single-Spa 构建一些东西并面临添加到应用程序 AngularJS 的问题。 Angular2 和 ReactJs 工作完美，但如果添加 AngularJS 并尝试为此应用程序使用

首页

博学

6Ren·AI

商城

javascript - 重构vue单文件组件