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？

（这就是我想要进行方法调用的原因，最初，通过改变变量，我们可能会省略流程中有价值的部分，例如优化和执行时的“时间”（s !!）我们的代码。在这里作为关键词，不要炸掉我，记住我正在学习。）

OLD：

我浏览了网页，我知道有一百万种不同的答案   而我的观点是最新版本的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>
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仍然拥有所有这些东西，但我们被邀请考虑视图模型......

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

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

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

Vue 2将道具传给孩子[old：“call child's method”]

1 个答案: