如何使用 VueJS 从父级向子级发送数据？答案

【问题标题】：How send data from parent to child with VueJS?如何使用 VueJS 从父级向子级发送数据？
【发布时间】：2019-08-22 11:22:03
【问题描述】：

我正在学习 VueJS2 以与 Laravel 一起使用，但最终在将数据从父级发送到子级并返回事件时遇到了一些困难。昨天我在 Google 和 Stack 上进行了几次搜索。

我试图告诉孩子，用户点击了父组件上的提交按钮，孩子必须从输入中获取数据并将其返回给父组件以发送。

userForm.blade.php

// Only part of the content
<b-form method="PATCH" action="/users/store">
  <b-userform to-send-data="sendCall"></b-userform>
</b-form>

formComponent.vue

// Part of <script>
data() {
  return {
    senCall: false
  };
},
methods: {
  getChildData(e) {
    this.sendCall = true;
    console.log("FormComponent: 1");
    console.log(e);
  },
  sendForm(data) {
    console.log("FormComponent: 2");
    console.log(data);
  }
}

userFormComponent.vue

// Part of <Script>
props: {
  toSendData: false
},
methods: {
  sendData: function() {
    console.log("UserForm: 1");
  }
},
watch: {
  toSendData: function() {
    console.log("Change? " + this.toSendData);
  }
}

我尝试将to-send-data="sendCall" 更改为:to-send-data="sendCall" 但收到错误：

[Vue 警告]：属性或方法“sendCall”未在实例上定义，但在渲染期间被引用。

更完整的代码： CodeSandbox

感谢您的帮助。

编辑：

在未定义的帮助下，我在 VueJS 文档中阅读了有关插槽/作用域插槽的更多信息，在另一个社区中，一位用户给了我link，以更好地了解父母和孩子的数据流。

为了工作的代码，我从 Blade 文件中删除了 to-send-data="sendCall" 并将其放在 formComponent.vue 文件的 <slot :to-send-data="sendCall"></slot> 中。

【问题讨论】：

标签： vuejs2 laravel-5.8

【解决方案1】：

这是一个插槽方式的演示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.1/vue.js"></script>
</head>

<body>
	<div id="app"></div>
  <script>
  Vue.component('b-form', {
    data: function() {
      return { sendData: 'hi' }
    },
    template: `<div>
				<slot :sendData="sendData"></slot>
			</div>`,
  })

  Vue.component('b-userform', {
    props: ['sendData'],
    template: '<div>{{sendData}}</div>',
  })

  new Vue({
    template: `<b-form>
  		<template v-slot:default="slotScope">
  		  <b-userform :sendData="slotScope.sendData"></b-userform>
  		</template>
  	</b-form>`,
  }).$mount('#app')
  </script>
</body>

您可以通过四种方式做到这一点：

将“sendData”放入“userForm.blade.php”
或者在 'userForm.blade.php' 中的 'formComponent' 上使用 ref

<b-form method="PATCH" ref="parentCom" action="/users/store">
  <b-userform :to-send-data="$refs.parentCom.sendCall"></b-userform>
</b-form>

或者在'userFormComponent'中直接访问$parent this.$parent.sendData
或者像这样使用“插槽”：

// in formComponent
<div>
  <slot v-bind:sendData="sendData">

  </slot>
</div>

// in userForm.blade.php

<b-form method="PATCH" action="/users/store">
  <template v-slot:default="slotScope">
     <b-userform :to-send-data="slotScope.sendData"></b-userform>
  </template>
</b-form>

;如果你的 vuejs 版本

【讨论】：

在刀片文件上使用 slot 和 var（带或不带 v-bind）不起作用，子项中的 toSendData 未定义。我试图避免的其他两种方法（例如 $ref 和 this.$parent），因为在文档中它说它适用于需要“弯曲 Vue 规则”的情况，我认为将数据从父级传递给子级不是案子。如果我对使用这两种方法有错误，我很抱歉并纠正我，就像我说我正在学习...... xD（Vue版本是2.6.10）
是的，你是对的。 '$ref 和 this.$parent' 不是推荐的方式。使用插槽可能是这种情况下的最佳方式。我粘贴了一个 sn-p 。它可以工作。
非常感谢，我不明白为什么昨天第一次尝试使用 slot 时不起作用......但是在我阅读了文档并了解了更多关于 slot 范围以及如何使用它之后，我更改了代码并且工作正常。