Question

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

我要告诉孩子用户单击了“父组件上的提交”按钮，孩子必须从输入中拾取数据并将其返回给父发送。

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文档中有关插槽/作用域插槽的更多信息，在另一个社区中，用户给了我link，以更好地了解父母和子女的数据流。

要使代码起作用，我从刀片文件中删除了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'中的'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版本低于2.6，请使用“ slot-scope”；

如何使用VueJS将数据从父级发送到子级？

1 个答案: