vue組件之間的引用

1.在一個.vue的文件里去引用另一個.vue的文件，比如ul里面要放很多li，就可以把li單獨成一個組件，說不准其他的.vue組件會用到，這樣可以多次使用，比較方便
<template>
  <div id="home-firstpage">
    <input type="text" v-model="inputValue">
    <button @click="handleSubmint">提交</button>
    <ul>
      <!--list指的是data里的list數組-->
      <!--添加刪除功能-->
      <todo-item v-for="(item,index) of list"
                 :key="index"
                 :content="item"
                 :index="index"
                 @delete="handleDelete"
      ></todo-item>
    </ul>

  </div>
</template>

<script>
  //引入組件ul里面的li，li單獨寫成了個組件，放在todoitem.vue
import todoitem from './todoitem'
export default {
  components: {
    'todo-item':todoitem //todo-item標簽是todoitem.vue這個組件,使用局部組件
  },
  data () {//data是個函數==data：function（）{}
    return{//返回的數據
      inputValue: '',
      list:[]
    }
  },
  methods: {
    //提交input里面輸入的值
    handleSubmint(){
      this.list.push(this.inputValue)//list指向data里面的list，也就是this.$data.list簡寫，將input的值加入到數組里面去，也就是li
      this.inputValue = ''//點擊提交后清空input
    },
    //刪除功能
    handleDelete(index){
      this.list.splice(index,1)
    }
  },
  /*  go (event) {
      event.preventDefault()
      this.$root.currentRoute = this.href
      window.history.pushState(
        null,
        routes[this.href],
        this.href
      )
    }*/
  }
</script>

2.以上已經把todoitem里面的li組件引入了
todoitem我是這么寫的，就寫了一個簡單的刪除功能

<template>
    <li @click="handleDelete">{{content}}</li>
</template>

<script>
export default {
props:['content','index'],
methods:{
  handleDelete(){
    this.$emit('delete',this.index)//組件通訊
  }
}

}
</script>