VueJS передает все реквизиты дочернему компоненту

Question

VueJS передает все реквизиты дочернему компоненту

1

Я совершенно новый для VueJS. В ответ вы можете легко использовать параметры отдыха для передачи реквизита детям. Есть ли аналогичная модель в Vue?

Рассмотрим этот родительский компонент с несколькими дочерними компонентами:

<template>
<header class="primary-nav">
<search-bar :config="searchBar"><search-bar>
//          ^^^^ this becomes the key on the props for SearchBar
header>
</template>

export default {
  data(){
    return {
      ... a few components ...
      searchBar : {
        model: '',
        name: 'search-bar',
        placeholder: 'Search Away',
        required:true,
        another: true
        andanother: true,
        andonemoreanotherone:true,
        thiscouldbehundredsofprops:true
      }
    }
  }
}

<template>
    <div :class="name">
        <form action="/s" method="post">
            <input type="checkbox">
            <label :for="config.name" class="icon-search">{{config.label}}</label>
            <text-input :config="computedTextInputProps"></text-input>
                        //^^^^ and so on. I don't like this config-dot property structure.
        </form>
    </div>
</template>

  export default {
    props: {
        name: String,
        required: Boolean,
        placeholder: String,
        model: String,
    },
    computed: {
     computedtextInputProps(){
       return justThePropsNeededForTheTextInput
     }
    }
 ...

Что мне не нравится, так это то, что реквизиты называются разнесенными с помощью config ключа или любого другого произвольного ключа. Компонент ввода текста (не показан) является прославленным полем input которое может принимать несколько атрибутов. Я мог бы сгладить реквизит, когда компонент создан, но это вообще хорошая идея?

Я удивлен, что этого вопроса не задавали раньше.

Благодарю.

Изменение: 10-06-2017

Связано: https://github.com/vuejs/vue/issues/4962

Simon 10 июнь 2017, в 13:18

Источник

Теги:

javascript

vue.js

rest

3 ответа

0

Родительский компонент

Вы можете передать столько реквизитов, сколько захотите, дочернему компоненту.

Дочерний компонент

Если вы удовлетворены всеми реквизитами, вы можете использовать v-bind="$props" внутри дочернего компонента, чтобы получить все реквизиты.

Конечный результат:

Готово:)

EsterlingAccime Youtuber 07 апр. 2019, в 01:26

5

Это должно быть v-bind="$attrs" в vue 2.2. +
husayt 16 май 2019, в 16:44

0

ОК. Я полностью пропустил это - просто используйте v-bind="object"

Simon 10 июнь 2017, в 10:58

Ещё вопросы

Это должно быть v-bind="$attrs" в vue 2.2. +

roli roli · Accepted Answer · 2018-04-29T04-49-00.000Z

Родительский компонент

<template>
  <div id="app">
    <child-component v-bind="propsToPass"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './components/child-component/child-component'

  export default {
    name: 'app',
    components: {
      ChildComponent
    },
    data () {
      return {
        propsToPass: {
          name: 'John',
          last_name: 'Doe',
          age: '29',
        }
      }
    }
  }
</script>

Детский компонент

<template>
  <div>
    <p>I am {{name}} {{last_name}} and i am {{age}} old</p>
    <another-child v-bind="$props"></another-child> <!-- another child here and we pass all props -->
  </div>
</template>

<script>
  import AnotherChild from "../another-child/another-child";
  export default {
    components: {AnotherChild},
    props: ['name', 'last_name', 'age'],
  }
</script>

Еще один дочерний компонент внутри указанного компонента

<template>
    <h1>I am saying it again: I am {{name}} {{last_name}} and i am {{age}} old</h1>
</template>

<script>
    export default {
      props: ['name', 'last_name', 'age']
    }
</script>

Это должно быть v-bind="$attrs" в vue 2.2. +
Нет, $ attrs указывает все переданные атрибуты, которые не объявлены как реквизиты.