Vue 2 将道具传递给 child [旧："call child's method"]

Question

好的，所以我知道我不应该调用 child 的方法，而是传递它 props。

我有 (parent) :

<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>

和（child）：

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

第一个控制台日志（在 parent 内）在每个方法上都正确打印，但 child 中的第二个控制台日志始终保持真实。我从 :

每次触发parent中的方法时，需要打印console.log中的什么方法？

（这就是我想要 method-calling 的原因，最初，通过使用变量，我们可能会忽略过程中有价值的部分，例如优化和 "when"执行我们的代码。pontetally 是这里的关键词，不要对我吹毛求疵，记住我正在学习。）

旧：

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.

How do you call a child method?

I have a 1 component = 1 file setup.

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

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>
parent :
<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>
console :
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)

Answer 1

请不要这样做。你在考虑事件。当 x 发生时，做 y。真是 jquery 2005 人。 Vue 仍然拥有所有这些东西，但我们被邀请从视图模型的角度来思考...

你想要你的状态在 a 变量中，在 window 范围内，你想要反应管道链接你的 vue 东西到你所在的州 object。要切换可见性，请使用 dynamic class binding, or v-if。然后考虑如何表示您的状态。它可以像 store.titleVisible 这样的属性一样简单。但是，您想 'normalize' 您的商店，并避免状态项之间的关系。因此，如果标题可见性真的取决于更高层的东西，比如 editMode 或其他东西，那么只需将 higher-up 东西放在商店中，然后在需要时创建计算属性。

目标是当事情发生时你不在乎。您只需定义标记和商店之间的关系，然后让 Vue 来处理它。文档会告诉您使用 props 进行 parent=>child 和 $emit 进行 child=>parent 通信。事实上，除非您拥有组件的多个实例或可重用组件，否则您不需要它。 Vue 的东西与商店对话，而不是其他 Vue 的东西。对于 single-use 组件，至于你的根 Vue，只需使用 data:.

每当您发现自己在编写 show/hide 方法时，您就做错了。它很直观（因为它是程序化的），但您很快就会意识到 MVVM 方法有多好。

Vue 2 将道具传递给 child [旧："call child's method"]

Vue 2 pass props to child [old : "call child's method"]

call

parent-child

vuejs2