vue组件动态绑定属性值

vue组件动态绑定属性值 — vue技术交流群（864583465)

应用场景：在有些时候，我们需要根据后台返回的数据，动态渲染组件，同时动态渲染的组件上也需要动态绑定属性值，举个例子：

// 1、假设从后台拿到的数据为
let compList = [
	{
		compType: 'select',
		props: {
			multiple: false,
			filterable: true
		},
		value: '',
		options: [
			{
				label: '选项1',
				value: '1',
			},
			{
				label: '选项2',
				value: '2'
			}
		]
	},
	{
		compType: 'input',
		props: {
			clearable: false,
		},
		value: '',
	}
] 

// 2、现在需要根据该list每一项中的compType去渲染不同的表单组件：
//    select => 下拉框， input => 输入框，同时，需要将每一项的props传递到对应的组件中

// 3、根据compType渲染不同的组件，大家可能都会。可以用vue的component，或者直接写个if else去判断，
// 两种实现方式都行。然而由于不同的组件绑定的属性值不一样，一个一个添加相关属性，效率很低，
// 而且一旦组件比较多就会增加工作量，这就需要能够动态去添加组件的属性值，这里就用到了v-bind指令，代码如下

<template>
  <div class="home">
    <el-input
      v-model="input"
      v-bind="props"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class Home extends Vue {
  private input = ''
  private props = {
    placeholder: '请输入内容',
    clearable: true
  }
}
</script>

// 4、需要注意的是props对象里的key值要与实际组件的属性值一样，否则应该不生效的。

欢迎加入vue技术交流群 864583465，你的提问将是我们共同进步的关键！！！