您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

自定义组件案例

App.vue

<template>
  <div>
    <my-button @enter="submit" clear></my-button>
    <my-list :data="list" @del="del" @update="update"></my-list>
  </div>
</template>

<script>
import Input from "@/views/Input";
import List from "@/views/List";
export default {
  data() {
    return {
      list: [],
    };
  },
  components: {
    "my-button": Input,
    "my-list": List,
  },
  methods: {
  //添加进数组
    submit(val) {
      this.list.push(val)
    },
    //删除
    del(item,index){
      let rel=confirm(`确定要删除${item}吗?`)
      if(rel){
        this.list.splice(index,1)
      }
    },
    //修改
    update(item,index){
      let rel=prompt('请输入新值:')
      if(rel){
        this.list.splice(index,1,rel)
      }
    }
  },
};
</script>

<style>
</style>

Input.vue

<template>
  <div>
    <input type="text" v-model.trim="input" @keypress.enter="hand" />
  </div>
</template>

<script>
export default {
  props: {
    clear: Boolean,
  },
  data() {
    return {
      input: "",
    };
  },
  methods: {
  //传值  清空输入框
    hand() {
      if (!this.input.trim()) return;
      this.$emit("enter", this.input);
      if (this.clear) {
        this.input = "";
      }
    },
  },
};
</script>

<style>
</style>

List.vue

<template>
  <div class="list">
    <ul v-if="data.length > 0">
      <li v-for="(item, index) in data" :key="index">
        {{ item }}
        <button @click="handupdate(item, index)">修改</button>
        <button @click="handdel(item, index)">删除</button>
      </li>
    </ul>
    <div v-else>暂无数据</div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      //必填项
      required: true,
    },
  },
  methods: {
    handupdate(item, index) {
      this.$emit("update", item, index);
    },
    handdel(item, index) {
      this.$emit("del", item, index);
    },
  },
};
</script>

<style scoped>
.list {
  margin: 20px;
}
</style>

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进