2021-09-29

v-model[vue自定义组件父取子值] 初探

VUE自定义组件【父组件获取子组件实时数据】

子组件

<template>
    <div class="el-tag">
      <el-tag
        slot="prefix"
        size="medium"
        v-for="tag in tags"
        :key="tag.name"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
        :type="tag.type"
      >
        {{ tag.name }}
      </el-tag>
    </div>
</template>

<script>
export default {
  name: "tagsin",
  data() {
    return {
      tags: [],
    };
  },
  watch: {
    defaultValue(v) {
      this.$emit("input", v);//input  关键点
    },
  },
  computed: {
    defaultValue() {
      return this.tagsLen == 0 ? "" : this.tags.map((a) => a.name).join(",");
    },
  }
};
</script>

父组件

<template>
  <section width="800px" height="600px">
    <tagsin :value-max-len="15" v-model="tagValue" :tag-max-len="50"/>
  </section>
</template>

<script>
import tagsin from "@/views/tagsin";
export default {
  name: "Question",
  components: {
    tagsin,
  },
  data() {
    return {
      value: [],
      tagValue: "",
    };
  },
  watch: {
    tagValue(v) {
      console.log(v);
    },
  },
  mounted() {},
};
</script>