Vue 2将道具传递给孩子[旧：“呼叫孩子的方法”] [英] Vue 2 pass props to child [old : "call child's method"]

问题描述

好的，所以我了解到我不应该调用孩子的方法，而应该传递它的道具。

ok so I've learned that I'm not supposed to call a child's method but pass it props instead.

我有（父母）：

<template>
  <div id="main">
    <Header :title ="title"/>
    <router-view/>
    <LateralMenu/>
  </div>
</template>
<script>
  export default {
    name: 'app'
    data: function () {
      return {
        title: true
      }
    },
    methods: {
      hideTitle: function () {
        this.title = false
        console.log(this.title)
      },
      showTitle: function () {
        this.title = true
        console.log(this.title)
      }
    }
  }
</script>

和（孩子）：

<script>
  export default {
    name: 'Header',
    props: ['title'],
    created () {
      console.log(this.title)
    },
    methods: {
    }
  }
</script>

第一个控制台日志（在父级内部）在每种方法上均正确打印，但是第二个控制台日志在孩子一直保持真实。我是从>将数据从父组件传递到子组件在vue.js中

the first console logs (inside the parent) print correctly on each method but the second console log within the child stays true all the time. I got this from : Pass data from parent to child component in vue.js

在每次触发父方法时，console.log需要打印什么方法？

inside what method does the console.log need to be to be printed everytime the methods in the parent are triggered?

（这就是为什么我想进行方法调用的原因，原本是通过使用变量来代替的，我们可能会忽略过程中有价值的部分，例如优化和何时

(this is why I wanted to go for method-calling, originally, by going with variables instead, we're potentially omitting valuable parts of the process such as optimization and a "when" for the execution(s!!) of our code. pontetally being the key word here, don't blow up on me, keep in mind that I'm learning.)

OLD：

我浏览了网络，我知道那里有一百万种不同的答案
，我的意思是Vue的最新版本没有那么多百万美元的答案可用。

I've browsed the web and I know there a a million different answers and my point is with the latest version of vue none of those millions of answers work.

要么一切都已弃用，要么根本不适用，但我需要一个
解决方案。

either everything is deprecated or it just doesn't apply but I need a solution.

您如何调用子方法？

我有1个组件= 1个文件设置。

I have a 1 component = 1 file setup.

DOM在< template> 标记内声明javascript在
a < script> 标记内编写。我正在使用vue-cli脚手架。

DOM is declared inside a <template> tag javascript is written inside a <script> tag. I'm going off of vue-cli scaffolding.

我尝试过的最新方法是@emit（有时与@on
配对有时没有）不会't work：

latest method I've tried is @emit (sometimes paired with an @on sometimes not) doesn't work :

child：

<script>
  export default {
    name: 'Header',
    created () {
      this.$on('hideTitlefinal', this.hideTitlefinal)
    },
    methods: {

      hideTitlefinal: function () {
        console.log('hideeeee')
      },
      showTitlefinal: function () {
        console.log('shwowwww')
      }
    }
  }
</script>

父母：

<template>
  <div id="main">
    <Header v-on:hideTitle="hideTitlefinal" v-on:showTitle="showTitlefinal"/>
    <router-view/>
    <LateralMenu/>
  </div>
</template>

<script>
  export default {
    methods: {
      hideTitle: function () {
        this.$emit('hideTitle')
      },
      showTitle: function () {
        this.$emit('showTitle')
      }
    }
  }
</script>

控制台：

Uncaught TypeError: this.$emit is not a function
    at Object.showTitle (Main.vue?1785:74)
    at VueComponent.showTitle (LateralMenu.vue?c2ae:113)
    at boundFn (vue.esm.js?efeb:186)
    at invoker (vue.esm.js?efeb:1943)
    at HTMLDivElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1778)

推荐答案

请不要这样做。您在考虑事件。当x发生时，执行y。真是个 jquery 2005 男人。 Vue仍然拥有所有这些东西，但是我们受邀根据视图模型进行思考...

Please don't do this. You're thinking in terms of events. When x happens, do y. That's sooo jquery 2005 man. Vue still has all that stuff, but we're being invited to think in terms of a view model...

您希望您的状态在 窗口范围内的一个 变量，并且您希望使用反应性管道将vue内容链接到状态对象。要切换可见性，请使用动态类绑定，或 v-if 。然后考虑如何代表您的状态。就像拥有 store.titleVisible 这样的属性一样简单。但是，您想使商店正常化，并避免状态项之间的关系。因此，如果标题的可视性确实取决于更高的内容（例如editMode之类的东西），则只需将更高的内容放入商店中，然后在需要时创建计算属性。

You want your state in a variable, in window scope, and you want reactive pipes linking your vue stuff to your state object. To toggle visibility, use a dynamic class binding, or v-if. Then think about how to represent your state. It could be as simple as having a property like store.titleVisible. But, you want to 'normalize' your store, and avoid relationships between items of state. So if title visibility really depends on something higher up, like an editMode or something, then just put the higher-up thing in the store, then create computed properties if you need them.

目标是您不在乎事情何时发生。您只需定义标记和商店之间的关系，然后让Vue来处理它。该文档将告诉您将props用于parent => child，将$ emit用于child => parent交流。事实是，在您拥有一个组件的多个实例或可重复使用的组件之前，您不需要这样做。 Vue东西与商店对话，不与其他Vue东西对话。对于一次性组件，对于根Vue，只需使用 data：。

The goal is that you don't care when things happen. You just define the relationships between the markup and the store, then let Vue take care of it. The docs will tell you to use props for parent=>child and $emit for child=>parent communication. Truth is you don't need this until you have multiple instances of a component, or reusable components. Vue stuff talks to a store, not to other vue stuff. For single-use components, as for your root Vue, just use the data:.

每当发现自己编写show / hide方法，您做错了。它很直观（因为它是过程性的），但是您会很快了解MVVM方法的优势。

Whenever you find yourself writing show/hide methods, you're doing it wrong. It's intuitive (because it's procedural), but you'll quickly appreciate how much better the MVVM approach is.

这篇关于Vue 2将道具传递给孩子[旧：“呼叫孩子的方法”]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！