Question

我对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

Answer 1

父组件

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

Answer 2

父组件

您可以将任意数量的道具传递给子组件

子组件

一旦您对所有道具都满意，则可以在子组件内部使用v-bind="$props"来检索所有道具。

最终结果：

完成：）

Answer 3

确定。我完全错过了 - 只需使用v-bind="object"

Answer 4

在vue 3中，除了属性传递，事件/侦听器也可以传递给子组件。

父组件

<template>
    <div>
       <Button @click="onClick">Click here</Button>
    </div>
</template>

<script>
import Button from "./Button.vue";
export default {
    methods:{
        onClick(evt) {
            // handle click event here
        }
    }
}
</script>

子组件

Button.vue

<template>
    <button v-bind="$attrs" v-on="$listeners">
        <slot />
    </button>
</template>

Answer 5

在子组件中，可以绑定 $attrs 和 $props。

<template>
    <button v-bind="[$props,$attrs]" v-on="$listeners">
        <slot />
    </button>
</template>

VueJS将所有道具传递给子组件

5 个答案:

父组件

子组件