如何使用 VueJS 将数据从 parent 发送到 child？

Question

我正在学习 VueJS2 以与 Laravel 一起使用，我最终在将数据从 parent 发送到 child 和 return 事件时遇到了一些困难。昨天我在 Google 和这里的 Stack 上做了几次搜索。

我试图告诉 child 用户点击了 parent 组件提交按钮，child 必须从输入和 return 它到 parent 发送。

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 warn]: Property or method "sendCall" is not defined on the instance but referenced during render.

更完整的代码： CodeSandbox

感谢您的帮助。

编辑：

在未定义的帮助下，我在 VueJS 文档上阅读了更多关于 slots/scoped 槽的信息，在另一个社区中，一位用户给了我一个 link 以更好地理解 parent 和 childs.

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

Answer 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'

<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
或者像这样使用'slot'：

// 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 版本 < 2.6 使用 'slot-scope';

如何使用 VueJS 将数据从 parent 发送到 child？

How send data from parent to child with VueJS?

vuejs2

laravel-5.8