<template>

  <div>

    <input v-model="inputValue" />

    <button class="button" @click="handleAddItem">提交</button>

  </div>

  <ul>

    <list-item  v-for="(item, index) in list" :key="index"

    :msg="item"

    />

  </ul>

</template>

<script>

import { reactive, ref } from "vue";

import listitem from './components/listitem.vue'

export default {

  name: "App",

  components: {

    listitem

  },

  setup() {

    const inputValue = ref("");

    const list = reactive([]);

    const handleAddItem = () => {

      list.push(inputValue.value);

      inputValue.value = '';

    };

    return { handleAddItem, inputValue, list };

  },

};

</script>

<style>

.button{

  margin-left: 20px;

  color: red;

}

</style>

<template>

    <li class="button">{{ msg }}</li>

</template>

<script>

export default {

  name: 'listitem',

  props: {

    msg: String

  }

}

</script>

<style >

</style>