进阶：扩展组件属性

通过扩展组件属性，可以实现组件功能的灵活配置，从而提高组件的可复用性。用户可以通过修改组件的属性，来改变组件的功能，而无需修改组件的源码。

1.如何自定义属性

• 以官方Image组件为例
• 配置“请输入图片地址”的属性

• 通过propObj和propOption可以创建自定义属性采集器

<template>
  <div>
    <img style="width: height: 800px"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentInfo: {
        // 组件唯一标识，全局唯一
        component: "cloudcc-demo-a",
        // 组件名称，在页面编辑器显示的名字
        compName: "cloudcc-demo-a",
        // 组件描述信息
        compDesc: "组件描述信息",
        // 设置组件在应用启动的时候加载
        loadModel: "start",
      },
      // 扩展属性对象
      propObj: {
        // 自定义属性时，必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "请输入图片地址",
          type: "input",
        },
      },
      isLock: false,
    };
  },
};
</script>

2.接收自定义属性

• 属性自定义好之后，需要使用props接收使用，通过定义的elePropObj来接收

<template>
  <div>
    <img style="width: height: 800px" :src="elePropObj.src" />
  </div>
</template>

<script>
export default {
  props: {
    // 自定义属性
    elePropObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      componentInfo: {
        // 组件唯一标识，全局唯一
        component: "cloudcc-demo-a",
        // 组件名称，在页面编辑器显示的名字
        compName: "cloudcc-demo-a",
        // 组件描述信息
        compDesc: "组件描述信息",
        // 设置组件在应用启动的时候加载
        loadModel: "start",
      },
      // 扩展属性对象
      propObj: {
        // 自定义属性时，必须写入ID
        id: "",
        src: "",
      },
      // 扩展属性配置
      propOption: {
        src: {
          lable: "请输入图片地址",
          type: "input",
        },
      },
      isLock: false,
    };
  },
};
</script>