时间戳

首页 > 解决方案 > 如何使用 VueJS 从父级向子级发送数据？

vuejs2 - 如何使用 VueJS 从父级向子级发送数据？

问题描述

我正在学习 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>

表单组件.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);
  }
}

用户表单组件.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 文档和另一个社区中阅读了有关插槽/作用域插槽的更多信息，并且在另一个社区中，用户给了我一个链接，以更好地了解父母和孩子的数据流。

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

标签： vuejs2laravel-5.8

解决方案

这是插槽方式的演示： 

<!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>

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

  1. 将“sendData”放入“userForm.blade.php”

  2. 或者在 '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>
  1. 或者在 'userFormComponent' 中直接访问 $parent this.$parent.sendData
  2. 或者像这样使用“插槽”：
// 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'；

推荐阅读