Vue.js Vue将数据从组件1传递到组件2中的方法

我有一个父组件和一个子组件。 在父组件中，我调用一个简单的childcomponent方法将电子邮件保存到

email

变量。但是变量

email

不会改变

My父组件：

import ChildComponent from "./ChildComponent";

export default {

  components: {ChildComponent},

  methods: {
    openDocument(d) {
      ChildComponent.methods.saveEmail('new@example.com');
  }
}

<template>
  <div>
    Email: {{ email }}
  </div>

</template>

<script>


export default {

  data: function () {
    return {
      email: ''
    }
  },
  methods: {
    saveEmail(email) {
      this.email = email; // this does NOT change my email variable
    }
  }

}
</script>

我的子组件：

import ChildComponent from "./ChildComponent";

export default {

  components: {ChildComponent},

  methods: {
    openDocument(d) {
      ChildComponent.methods.saveEmail('new@example.com');
  }
}

<template>
  <div>
    Email: {{ email }}
  </div>

</template>

<script>


export default {

  data: function () {
    return {
      email: ''
    }
  },
  methods: {
    saveEmail(email) {
      this.email = email; // this does NOT change my email variable
    }
  }

}
</script>

电子邮件：{{Email}
导出默认值{
数据：函数（）{
返回{
电子邮件：“”
}
},
方法：{
保存电子邮件（电子邮件）{
this.email=email；//这不会更改我的电子邮件变量
}
}
}

---

为什么我的

电子邮件

变量没有更改？如何更改此变量？

变量

ChildComponent

仅包含创建此类型组件的

配方

，但不包含实际组件。您的实际组件位于模板中-您必须向其添加

ref

属性（例如

），然后像

这样引用它。$refs.custom.saveEmail（）

变量

ChildComponent

仅保存创建此类型组件的

配方

，但不保存实际组件。您的实际组件位于模板中-您必须向其添加

ref

属性（例如

），然后像

这样引用它。$refs.custom.saveEmail（）

，在vue中，它不是这样工作的。您必须使用Probs：

家长：

<template>

    <div class="container">
        <child-component :email ="email"></child-component>   // NEW HERE
    </div>

</template>

<script>

import ChildComponent from "./ChildComponent";

module.exports = {

    data: function () {
        return {
            email:''
        }
    },

   methods: {
      openDocument(d) {
           this.email = "example@gmil.com"
      }
    },
}
</script>

//新来的
从“/ChildComponent”导入ChildComponent；
module.exports={
数据：函数（）{
返回{
电子邮件：“”
}
},
方法：{
公开文件（d）{
this.email=”example@gmil.com"
}
},
}

子组件：

<template>

<div class="container">
    <h1>Profile Form Component</h1>
</div>  

</template>


<script>


module.exports = {


module.exports = {   
  props: ['email'], //NEW HERE

  created: function () {
    
    console.log(this.email) //prints out an empty string
  }
}

</script>

轮廓形状组件
module.exports={
module.exports={
道具：['email']，//此处新增
已创建：函数（）{
console.log（this.email）//打印出一个空字符串
}
}

注意

当我在代码中添加了两条注释

NEW HERE

时，这两行对于您想要做的事情非常重要

我给你的代码是一个例子（不是一个完整的答案），Probs是你所要求的解决方案

---

希望它对vue有所帮助它不是这样工作的。您必须使用Probs：

家长：

<template>

    <div class="container">
        <child-component :email ="email"></child-component>   // NEW HERE
    </div>

</template>

<script>

import ChildComponent from "./ChildComponent";

module.exports = {

    data: function () {
        return {
            email:''
        }
    },

   methods: {
      openDocument(d) {
           this.email = "example@gmil.com"
      }
    },
}
</script>

//新来的
从“/ChildComponent”导入ChildComponent；
module.exports={
数据：函数（）{
返回{
电子邮件：“”
}
},
方法：{
公开文件（d）{
this.email=”example@gmil.com"
}
},
}

子组件：

<template>

<div class="container">
    <h1>Profile Form Component</h1>
</div>  

</template>


<script>


module.exports = {


module.exports = {   
  props: ['email'], //NEW HERE

  created: function () {
    
    console.log(this.email) //prints out an empty string
  }
}

</script>

轮廓形状组件
module.exports={
module.exports={
道具：['email']，//此处新增
已创建：函数（）{
console.log（this.email）//打印出一个空字符串
}
}

注意

当我在代码中添加了两条注释

NEW HERE

时，这两行对于您想要做的事情非常重要

我给你的代码是一个例子（不是一个完整的答案），Probs是你所要求的解决方案

希望能有帮助