vue 封装textarea

在 Vue 中封装 TextArea 组件，可以使用以下步骤：

1. 创建一个名为 TextArea 的组件

<template>
  <textarea
    v-model="value"
    :rows="rows"
    :cols="cols"
    :placeholder="placeholder"
    @input="updateValue($event.target.value)"
  ></textarea>
</template>

<script>
export default {
  name: "TextArea",
  props: {
    value: {
      type: String,
      default: "",
    },
    rows: {
      type: Number,
      default: 2,
    },
    cols: {
      type: Number,
      default: 20,
    },
    placeholder: {
      type: String,
      default: "请输入内容",
    },
  },
  methods: {
    updateValue(value) {
      this.$emit("input", value);
    },
  },
};
</script>

2. 在父组件中使用

<template>
  <div>
    <text-area v-model="content" :rows="5" :cols="30"></text-area>
  </div>
</template>

<script>
import TextArea from "@/components/TextArea.vue";

export default {
  components: {
    TextArea,
  },
  data() {
    return {
      content: "",
    };
  },
};
</script>

在上述示例中，我们创建了一个名为 `TextArea` 的组件，该组件渲染了一个 `<textarea>` 标签，并且接受了一些属性，如 `value`、`rows`、`cols` 和 `placeholder`，这些属性都可以通过 `props` 传递进来。当用户在 `<textarea>` 标签中输入内容时，`updateValue` 方法会将输入的内容通过 `$emit` 传递给父组件，以便在父组件中更新数据。在父组件中，我们可以通过 `v-model` 将 `content` 数据与 `TextArea` 组件中的 `value` 属性进行双向绑定，从而实现输入框内容的同步更新。