Question

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

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>

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

我知道我可以解决它只传递组件需要的道具，但是对于一个大型应用程序，我需要搜索所有组件并在每次需要添加时添加新的道具。这有点问题...... 在previus版本（2.1.10）中它完美无缺！

Answer 1

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

然而，可以内省组件道具，因此只能绑定组件所需的那些。

＆＃13;

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');

＆＃13;

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

＆＃13;

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

1 个答案: