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

Posted 2023-02-23

【中文标题】Vue 2 将道具传递给孩子 [旧：“调用孩子的方法”]

【英文标题】：Vue 2 pass props to child [old : "call child's method"]

【发布时间】：2018-05-03 22:02:06

【问题描述】：

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

我有（父母）：

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

【问题讨论】：

你不调用孩子的函数，你传递道具。反应式框架的重点是对数据做出反应。也就是说，这在技术上是可行的，只是一个坏主意，这就是为什么你找不到任何关于如何实现这一点的文档。

好吧，我不明白传递道具是什么样子的，你能给我举个例子吗？

【参考方案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 方法有多好。

【讨论】：

我不明白。我的意思是我唯一理解的是我有错误的方法，我完全愿意承认。一个人在正确地做这件事时会做什么？

首先感谢您的时间和回答。尽管我仍然认为自己是初学者，但我已经完成了一个完整的 React-redux、react-forms MVVM 项目，我确实掌握了组件和容器的概念。但是在我看来（起初）vue（我知道我可能错了）vue 开发人员已经忽略了这一切。或者他们沟通得很糟糕，我应该如何完成与 React 相同的事情。但现在我正试图影响一个“表亲”（孩子 -> 父母 -> 其他孩子），我采用 1 个组件 = 1 个文件的方法。我不能像你一样用 1 个文件 = 整个项目“作弊”

告诉我你的商店！您使用单个文件组件这一事实不会改变任何事情。据我说，你仍然需要一家商店。您可以公开组件方法，查看 $root、$children 和 $refs。但这是通往地狱的道路。像this.$root.$children[1].hideTitle() 这样的东西会让你调用你的方法。但是你有什么。一个新鲜的热气腾腾的烂摊子是什么:-)

Here's the page on state management.。也许您需要离开并度过一段非常糟糕的时光，然后回来创建一家商店:-)

把 vuex 留到以后。只需使用一个普通的 javascript 对象，但请确保您只有 一个。将其称为 store 或 vueStore，然后将所有内容都放在那里。在需要时开始更多地构建它，但不是在此之前（树状结构、变异方法，然后可能是 vuex）。没有 store 的 Vue 有点像没有字符串的字符串木偶。