时间戳

首页 > 解决方案 > 将父 vm 作为道具传递给组件

vue.js - 将父 vm 作为道具传递给组件

问题描述

所以我正在构建一个 Nuxt 应用程序来处理文档（从广义上讲），它会有一个菜单，我显然会制作一个组件。该菜单将包含对文档本身的许多操作，例如打开/保存文件、编辑等。

我知道将信息从组件传递到其父级（在本例中为 doc vm）的标准方法是通过消息，但感觉有点矫枉过正，语法是什么（发出处理程序只是感觉不自然我在这种情况下）等等。

出于这个原因，我想知道为什么我不能将父 vm 作为道具传递给菜单组件？它将包含各种方法，我将能够通过菜单轻松调用它们。就像是：

父级（文档.vue）：

<template>
<main-menu :document='vm'/>
</template>

<script>
import MainMenu from '~/components/MainMenu.vue'

export default {
  data(): {
    return {
      vm: this,
      //...
    }
  },
  methods: {
    save() {
      //...
    }
  }
//...
</script>

菜单组件（MainMenu.vue）：

<template>
<button @click='document.save()'>Save document</button>
</template>

<script>
export default {
  props = ['document']
}
</script>

问题是：这种方法有什么本质上不好的地方吗？

（我想如果应用程序架构可能发生变化，这可能会出现问题，但很难想象出于某种原因我需要一个没有基础文档的菜单。）

标签： vue.jsnuxt.js

解决方案

如果您的 Menu 始终是组件的子组件，那么您不必传递您的父组件。它已经保存在一个名为 this.$parent 的 Vue 变量中。

我做了一个小沙箱给你一个例子。

父级有一个函数，例如：

/// PARENT

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  methods: {
    iExist(add) {
      console.log("I am in parent" + add);
    },
  },
};

然后你可以用 . 从 child 调用它this.$parent.iExist('something')。

由于 this.$parent 在评估模板时没有定义，我们必须在子级中创建一个方法，以调用（超级）其父级上的相应函数。

/// CHILD
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="iExist(', but was called from child')">Click Me</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    iExist(add) {
      this.$parent.iExist(add);
    },
  },
};
</script>

推荐阅读