Как отправить данные от родителя к ребенку с VueJS? - PullRequest
Новая
       22

Как отправить данные от родителя к ребенку с VueJS?

0 голосов
/ 01 апреля 2019

Я учу 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

Спасибо за помощь.

EDIT:

С помощью неопределенной помощи я узнал больше о слотах / слотах с областями действия в документации VueJS, а в другом сообществе пользователь дал мне ссылку , чтобы лучше понять поток данных родителей и детей.

Чтобы код работал, я удалил to-send-data="sendCall" из файла Blade и поместил его в <slot :to-send-data="sendCall"></slot> в файле formComponent.vue.

1 Ответ

1 голос
/ 01 апреля 2019

Это демо для игрового автомата:

<!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. Или используйте ref для 'formComponent' в '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 Или использовать слот как: 
// 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»;</p>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...