低代码基础入门——第二课：深度认识组件属性，实现组件属性的可交互性

2023-12-02 01:28:51

在上篇教程中，我们简单的实现了右侧属性面板。可以通过更改按钮文字，重新渲染Button组件。目前来到了本系列的第五章，本篇主要是实现Button组件的全部属性配置。

如果你是第一次看本系列中的文章，请参考链接中的文章。

一、导入组件

在第一篇教程中我们已经实现了组件的功能，这里为了方便我们直接引入这个组件，我们首先需要把组件导入项目中。组件导入的方式非常简单，我们直接在app.vue文件中引入组件就可以了。

// app.vue
<template>
  <div class="app">
    <button-component></button-component>
  </div>
</template>

<script>
import ButtonComponent from './components/ButtonComponent.vue'

export default {
  components: {
    ButtonComponent
  }
}
</script>

二、定义组件的属性

在这个例子中，我们的按钮组件有三个属性：文字、背景颜色和边框颜色。我们可以用Vue的props选项来定义组件的属性。

// components/ButtonComponent.vue
<template>
  <button :style="{ backgroundColor: backgroundColor, borderColor: borderColor }" @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: '按钮'
    },
    backgroundColor: {
      type: String,
      default: '#ccc'
    },
    borderColor: {
      type: String,
      default: '#333'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

三、在属性面板中显示属性

现在我们已经定义了组件的属性，接下来我们需要在属性面板中显示这些属性，以便用户可以配置它们。我们可以使用Vue的v-model指令来实现这一点。

// components/PropertyPanel.vue
<template>
  <div>
    <label for="text">文字：</label>
    <input type="text" v-model="text" />

    <label for="backgroundColor">背景颜色：</label>
    <input type="color" v-model="backgroundColor" />

    <label for="borderColor">边框颜色：</label>
    <input type="color" v-model="borderColor" />
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: '按钮'
    },
    backgroundColor: {
      type: String,
      default: '#ccc'
    },
    borderColor: {
      type: String,
      default: '#333'
    }
  }
}
</script>

四、监听属性的变化

当用户在属性面板中更改属性值时，我们需要监听这些变化并更新组件的属性。我们可以使用Vue的watch选项来实现这一点。

// components/ButtonComponent.vue
<script>
export default {
  props: {
    text: {
      type: String,
      default: '按钮'
    },
    backgroundColor: {
      type: String,
      default: '#ccc'
    },
    borderColor: {
      type: String,
      default: '#333'
    }
  },
  watch: {
    text(newValue) {
      this.$emit('update:text', newValue)
    },
    backgroundColor(newValue) {
      this.$emit('update:backgroundColor', newValue)
    },
    borderColor(newValue) {
      this.$emit('update:borderColor', newValue)
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

五、更新组件的属性

当组件的属性发生变化时，我们需要更新组件的属性值。我们可以使用Vue的set方法来实现这一点。

// app.vue
<script>
export default {
  components: {
    ButtonComponent
  },
  data() {
    return {
      text: '按钮',
      backgroundColor: '#ccc',
      borderColor: '#333'
    }
  },
  watch: {
    text(newValue) {
      this.$refs.buttonComponent.text = newValue
    },
    backgroundColor(newValue) {
      this.$refs.buttonComponent.backgroundColor = newValue
    },
    borderColor(newValue) {
      this.$refs.buttonComponent.borderColor = newValue
    }
  }
}
</script>