Jumbotron.vue

<template>
   <div class="jumbotron jumbotron-fluid">
       <div class="container">
           <h1 class="display-3">{{title}}</h1>
          
       </div>
   </div>
</template>

<script>
export default {
    name:"Jumbotron",
    data() {
        return {
            title:"Cli组件化订台系统"
        }
    },
}
</script>

<style lang="css">
    
</style>

Form.vue

<template>
  <div class="col border">
    <div class="form-group">
      <label for>桌号：</label>
      <input
        v-model="cardData.table"
        type="text"
        class="form-control"
        name
        id
        aria-describedby="helpId"
        placeholder="请输入桌号："
      />
      <label for>人数：</label>
      <input
        v-model="cardData.num"
        type="text"
        class="form-control"
        name
        id
        aria-describedby="helpId"
        placeholder="请输入人数："
      />

      <button @click="add" type="button" name id class="btn btn-primary btn-lg btn-block my-3">创建</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Form",

  data() {
    return {
      cardData: {
        table: "",
        num: ""
      }
    };
  },
  methods: {
    add: function() {
      this.$emit("addinfo", this.cardData);
      // 重置表单的值
     this.cardData={table:"",num:""};
     },
    

   
  }
};
</script>

<style lang="css">
</style>

Card.vue

<template>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">{{info.table}}</h4>
      <p class="card-text">{{info.num}}</p>
      <button @click="del(index)" type="button" name id class="btn btn-primary btn-lg btn-block">X</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    info: Object
  },
  methods: {
    //   删除的方法
    del: function(i) {
      //    console.log(`del ${i}`);
      // 子组件访问父组件（或实例）中的数据
      // 事件—监听器 模型
      // 子组件触发（提交）一个（自定义）事件
      // 父组件监听该（自定义）事件

      // 方案一
      // eventCommit
      // 子组件提交自定义事件
      // this.$emit('rm-card',i);

      // 方案二
      // 不推荐
      // this.$parent.rmSkill(i);
      this.$emit("rm-card", i);
      // this.$parent.rmCard(i);
    }
  }
};
</script>

<style lang="css">
</style>

App.vue

<template>
  <div class="container">
    <jumbotron />
    <div class="row">
      <div class="col-lg-6">
        <!-- 注册事件监听器 -->
        <Form @addinfo="addcard" />
      </div>
      <div class="col-lg-6">
        <div class="row">
          <div v-for="(item, index) in cardData" :key="index" class="col-lg-4">
            <!-- 注册事件监听器 -->
            <Card @rm-card="rmCard(index)" :info="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Jumbotron from "./components/Jumbotron.vue";

import Form from "./components/Form.vue";

import Card from "./components/Card.vue";

export default {
  name: "App",
  components: {
    Jumbotron,
    Form,
    Card
  },

  data() {
    return {
      cardData: [
        {
          table: "101",
          num: 10
        },
        {
          table: "102",
          num: 12
        }
      ]
    };
  },

  methods: {
    // 删除卡片的方法
    rmCard: function(i) {
      this.cardData.splice(i, 1);
    },

    // 增加卡片的方法
    addcard: function(i) {
      this.cardData.push(i);
    }
  }
};
</script>

运行：

看看效果：