Vue 2 将道具传递给孩子 [旧：“调用孩子的方法”]

Question

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

我有（父母）：

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

第一个控制台日志（在父级内部）在每种方法上都正确打印，但子级中的第二个控制台日志始终保持真实。我是从：Pass data from parent to child component in vue.js

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

（这就是为什么我想进行方法调用的原因，最初，通过使用变量来代替，我们可能会省略流程中有价值的部分，例如优化和执行的“时间”！！）我们的代码。这里是关键词，不要对我大发雷霆，记住我正在学习。）

旧：

我浏览过网络，我知道有一百万种不同的答案 我的观点是最新版本的 vue 没有那些数以百万计的 答案有效。

要么所有内容都已弃用，要么只是不适用，但我需要一个 解决方案。

如何调用子方法？

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

DOM 在 <template> 标签内声明 javascript 写在里面 <script> 标签。我要离开 vue-cli 脚手架了。

我尝试过的最新方法是@emit（有时与@on 配对 有时不是）不起作用：

孩子：

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

Answer 1

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

您希望您的状态在 a 变量中，在窗口范围内，并且您希望反应式管道将您的 vue 内容链接到您的状态对象。要切换可见性，请使用dynamic class binding 或v-if。然后想想如何代表你的状态。它可以像拥有store.titleVisible 这样的属性一样简单。但是，您希望“规范化”您的商店，并避免状态项之间的关系。因此，如果标题的可见性真的取决于更高层的东西，比如 editMode 或其他东西，那么只需将更高层的东西放在 store 中，然后在需要时创建计算属性。

我们的目标是当事情发生时你不在乎。您只需定义标记和商店之间的关系，然后让 Vue 处理它。文档将告诉您使用 props 进行 parent=>child 和 $emit 进行 child=>parent 通信。事实是，在您拥有一个组件的多个实例或可重用组件之前，您不需要它。 Vue 的东西与商店对话，不与其他 Vue 的东西。对于一次性组件，对于您的根 Vue，只需使用 data:。

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