Ву.js передает данные из слота в экземпляр компонента


Ву.js передает данные из слота в экземпляр компонента

23.02.2017 01:54:03 Просмотров 96 Источник

Я пытаюсь создать многоразовый компонент для работы с отправкой форм через AJAX с помощью Vue.JS. В идеале, то , что я хочу сделать, - это иметь общий компонент, который может использоваться вместо form, в котором может содержаться неизвестный набор элементов формы, таких как input, select, textareaи т. д.

У меня есть следующий код для моего компонента, который называется ajax-form:

<template>
    <form class="form" :action="action" :method="method" v-on:submit.prevent="ajaxSubmit">
        <slot></slot>
    </form>
</template>

<script>
module.exports = {
    props: {
        action: {
            required: true,
            type: String
        },
        method: {
            default: 'post',
            required: false,
            type: String
        }
    },
    data() {
        return {
            formData: {}
        }
    },
    methods: {
        ajaxSubmit() {
            // Do ajax
        }
    }
}
</script>

И в моем HTML, у меня было бы что-то вроде следующего:

<ajax-form action="http://example.com/do/something">
    <input name="first_name" type="text">
    <textarea name="about_you"></textarea>
</ajax-form>

В идеале я хотел бы, чтобы все элементы формы, размещенные внутри моего компонента, использовали его слот для сопоставления с data.formDataсвойство formData в моем экземпляре компонента Vue. Поэтому в этом случае свойство dataбудет выглядеть следующим образом:

data: {
    formData: {
        first_name: '',
        about: ''
    }
}

Если бы я должен был добавить другое поле к компоненту в моем HTML, я ожидал бы, что это также будет сопоставлено data.

Есть ли способ добиться этого? Есть ли способ, которым я могу сказать Vue, помещая мои элементы формы в компонент через слот, что я хочу, чтобы этот элемент был сопоставлен с чем-то в data?

Я попытался добавить v-modelи v-bindна каждый элемент формы, чтобы увидеть, будет ли он каким-то образом передавать данные в данные компонента:

<ajax-form action="http://example.com/do/something">
    <input name="first_name" type="text" v-model="formData.first_name">
</ajax-form>

Однако Vue жалуется, что свойства реактивных данных должны быть объявлены до их использования в шаблоне:

[Vue warn]: свойство или метод "formData" не определены в экземпляре, но ссылаются во время визуализации. Обязательно объявите свойства реактивных данных в параметре data.

У вопроса есть решение - Посмотреть?

Ответы - Ву.js передает данные из слота в экземпляр компонента / Vue.js pass data from slot into component instance

Является ответом!
Goodbytes

23.02.2017 06:31:33

Вы не можете сделать то, что вы просите, поскольку область слотов ограничена родительской областью.

Вы можете определить formData на глобальном экземпляре Vue, так что теперь он доступен из родительской области.

const app = new Vue({
    el: '#app',
    data: {
        formData : {}
    }
});

Теперь вы можете передать его в форму в качестве опоры:

<ajax-form action="#" :form-data="formData>
    <input name="first_name" type="text" v-model="formData.first_name">
</ajax-form>
https://stackoverflow.com/questions/42413704/vue-js-pass-data-from-slot-into-component-instance/42419955#comment71985402_42419955
Идеальный. Я чувствую, что Vue не позволит мне сделать это так, как я хочу, только с компонентом, передающим данные из слота, но это хороший обходной путь.
blockhead

21.04.2017 03:46:57

Вы можете сделать это с помощью scopedSlots.

Api выглядит так:

<ajax-form action="http://example.com/do/something">
   <template scope="{formData}">    
   <input name="first_name" type="text" v-model="formData.first_name">
   </template>
</ajax-form>

И в компоненте ajax-form:

<form class="form" :action="action" :method="method" v-on:submit.prevent="ajaxSubmit">
   <slot :formData="formData">
</form>
https://stackoverflow.com/questions/42413704/vue-js-pass-data-from-slot-into-component-instance/43543107#comment79455185_43543107
Это очень помогло! Спасибо.
https://stackoverflow.com/questions/42413704/vue-js-pass-data-from-slot-into-component-instance/43543107#comment88492190_43543107
Это должен быть принятый ответ! Это действительно помогло мне понять ограниченные слоты, поскольку документация не дает никаких реальных примеров. Кроме того , обратите внимание, что с Vue 2.5 scope, который можно использовать для любого элемента, а не только slot-scope. Так что в этом примере вы могли бы иметь templateвместо упаковки входных данных в тег шаблона.
https://stackoverflow.com/questions/42413704/vue-js-pass-data-from-slot-into-component-instance/43543107#comment99696315_43543107
Большое спасибо. Но вю 2.6 обновляется по синтаксису, используя ограниченные слоты.
https://stackoverflow.com/questions/42413704/vue-js-pass-data-from-slot-into-component-instance/43543107#comment102808682_43543107
это и есть настоящий ответ...спасибо
Hazem Sabry

18.09.2019 02:20:43

Вы можете передать данные от родителя к ребенку в качестве параметра следующим образом:

у родителей:

<child-component ref="child">
      <h1 slot="heading">Test passing data to child</h1>
      <form slot="content">
          <input type="text" v-model="name" placeholder="Type your name" class="half">
          <input type="text" v-model="email" placeholder="Type your email" class="half">
          <div class="actions">
              <button data-role="submit" @click.prevent="callAddRep($event)">Add</button>
          </div>
      </form>
</child-component>
data() {
    return {
        name: '',
        email: ''
    }
},
methods: {
    callAddRep: function(e) {

      let name = this.name,
          email = this.email

      this.$refs.child.addRep(e, {
          name,
          email
      })
  }

в ребенке:

methods: {
      addRep: function(e, data) {

          //Data passed successfully
          console.log(data)

      }
  }
Помочь в развитии проекта:
Закрыть X