从父母到孩子的传递数据

Posted 2023-02-23

【中文标题】从父母到孩子的传递数据

【英文标题】：Delivery data from parent to child

【发布时间】：2018-10-02 15:56:42

【问题描述】：

在谷歌搜索了几个小时并尝试了所有国王示例之后，我仍然无法弄清楚如何调用位于子级的函数或将任何数据从父级传递给子级。我尝试了很多例子都没有成功，我对 Vue 感到非常困惑，将数据传递给孩子有这么复杂吗？这是我从其中一个示例中得出的结论，但它不适用于我，也许我在这里做错了什么？谢谢:(

parent.vue

<template>
   export default 
         name:'parent'
         data:
             retrun:
                  dataTochild:''
             
         ,
         methods:
             callToChild:function()
                 this.dataTochild = 'Hello Child'
             
         
   
</template>

<child :myprop="dataTochild" />
<input @click="this.callToChild" />

child.vue

<template>
export default 
   name:'child',
   props:['myprop'],
   watch: 
     myprop:function()
      alert('Hello Parent')
     
   

<template>

顺便说一下，我用的是Vue 2版本！

【参考方案1】：

return (retrun) 有拼写错误，您省略的代码可能还有其他错误。

工作现场演示

它正在处理live demo

代码

家长

<template>
  <div class="parent">
    <child :myprop="dataTochild" />
    <button @click="callToChild">Press me!</button>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default 
  name: "Parent",
  data() 
    return 
      dataTochild: "",
      counter: 0
    ;
  ,
  methods: 
    callToChild: function() 
      this.counter = this.counter + 1;
      this.dataTochild = "Hello Child " + this.counter;
    
  ,
  components: 
    Child
  
;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button 
  width: 200px;
  height: 60px;

</style>

孩子

<template>
  <div class="child">
    <p> myprop </p>
  </div>
</template>

<script>
export default 
  name: "Child",
  props: ["myprop"],
  watch: 
    myprop: function() 
      console.log("Hello Parent");
      alert("Hello Parent");
    
  
;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div.child 
  width: 400px;
  height: 100px;
  margin: auto;

</style>

【讨论】：

感谢 Marco 的帮助，是的，它正在工作，我发现了问题。在我的代码中，我有一个按钮 Set Index 1 并且当我删除 "(1)" Set Index 1 它确实有效。我现在想知道，如何通过单击按钮将 var 传递给函数....

@Vadim 您可以传递一个值，通常 @click="myfunc(...)" 是有效的语法（对于其他事件处理程序也是如此）。控制台有错误吗？

控制台中没有错误，但我发现当我将值作为字符串传递时，就像这样 @click="callToChild('0')" 它工作！！！！！！但是当我作为 int 值传递时 @click="callToChild(0) "它不起作用。

奇怪，它应该适用于数值。事实上，我已经在live demo 中添加了一个示例，它也可以在那里工作......

是的，我对您的示例进行了相同的测试，并且两个值都有效，我不确定为什么最终它对不同的值类型的反应如此不同。无论如何，感谢您的帮助，我稍后会尝试找出它为什么反应如此奇怪并会在这里发布，目前，我的组件正在工作并相互通信，所以这个问题已经解决了！！！