javascript - Vuejs 自动将所有 Prop 传递给 child

Question

当我以这种方式将所有 Prop 传给 child 时

v-bind="$props"

父级传递所有 Prop ，但子级不过滤它，如果不识别子级在我们的 html 中打印的 Prop 。 结果是一个脏的和无效的 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>

当我有很多 Prop 时，这是一个大问题

我知道我可以解决它只传递组件需要的 Prop ，但是对于一个大型应用程序，我需要搜索我的所有组件并在每次需要添加它时添加一个新 Prop 。太有问题了... 在以前的版本 (2.1.10) 中，它工作得很好!

Answer 1

简化 props 规范会降低代码的清晰度，因此您应该避免这样做。子 Prop 名称与父 Prop 名称匹配的情况表明您应该使用 event bus。或者(如评论者所建议的那样)Vuex 数据存储。

然而，可以内省(introspection)组件 props，因此只绑定(bind)组件需要的 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>