Vuejs自动将所有道具传递给孩子答案

【问题标题】：Vuejs automatic passing down all prop to childVuejs自动将所有道具传递给孩子
【发布时间】：2017-10-02 08:23:15
【问题描述】：

当我以这种方式将所有道具传递给孩子时

v-bind="$props"

父级传递所有道具，但子级不会对其进行过滤，并且如果无法识别子级在我们的 html 中打印的道具。结果是一个肮脏和无效的 html :(

	Vue.component('cc', {
		template: `
			<div>here is cc
				{{y}}
			</div>
		`,
		props: ['y']
	});	
  Vue.component('bb', {
		template: `
			<div>here is bb
				{{x}}
			</div>
		`,
		props: ['x']
	});

	Vue.component('aa', {
		template: `
			<div>here is aa
				<bb v-bind="$props" :x="'1'"/>
        <cc v-bind="$props" />
			</div>
		`,
		props: ['x', 'y']
	})
	var a = new Vue({
		template: `
		<div>
			<aa :x="x" :y="1"/>
		</div>
		`,
		data(){
			return {
				x: 0
			};
		}
	});
	a.$mount('#app');

<script src="https://unpkg.com/vue"></script>

<div id="app">
</div>

正如你在这个例子中看到的，组件 bb 有这个 HTML

<div y="1">here is bb 1</div>

并且组件 cc 有

<div x="0">here is cc 1</div>

当我有很多道具时这是个大问题

我知道我可以只传递组件需要的道具来解决它，但是对于大型应用程序，我需要搜索所有组件并在每次需要添加新道具时添加它。太有问题了... 在以前的版本 (2.1.10) 中它可以完美运行！

【问题讨论】：

好吧，如果你的 prop 流程变得复杂，你应该考虑将 Vuex 引入你的应用程序，并将所有数据保存在存储中。
是的，正如@BelminBedak 所说，vuex 是个好主意。此外，Vue 使所有内容都具有范围，并且恕我直言，将其传递给孩子/父母有点不舒服，因此您的组件尽可能独立。实际上它或多或少是 vue 的目的，所以我们不应该尝试破解它;)

标签： javascript html vue.js vuejs2

【解决方案1】：

缩短 props 的规范会降低代码的清晰度，因此您应该避免这样做。子道具名称与父道具名称匹配的情况表明您应该使用event bus 或（如评论者建议的）Vuex 数据存储。

尽管如此，可以内省组件的 props，因此只绑定组件需要的那些。

function propsFor(componentName, propSource) {
  const P = Vue.component(componentName).prototype;
  const propNames = Object.keys(P);
  // More expensively, but more correctly:
  // propNames = Object.keys(new (Vue.component(componentName))().$props);
  const result = {};

  for (const n of propNames) {
    result[n] = propSource[n];
  }
  return result;
}

Vue.component('cc', {
  template: `
			<div>here is cc
				{{y}}
			</div>
		`,
  props: ['y']
});
Vue.component('bb', {
  template: `
			<div>here is bb
				{{x}}
			</div>
		`,
  props: ['x']
});

Vue.component('aa', {
  template: `
			<div>here is aa
				<bb v-bind="propsFor('bb', $props)" :x="'1'"/>
        <cc v-bind="propsFor('cc', $props)" />
			</div>
		`,
  props: ['x', 'y']
})
var a = new Vue({
  template: `
		<div>
			<aa :x="x" :y="1"/>
		</div>
		`,
  data() {
    return {
      x: 0
    };
  }
});
a.$mount('#app');

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script>
<div id="app">
</div>

【讨论】：