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>