vue父组件传值和子组件触发父组件方法

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><div id="test">
<li-component v-for="(item,index) in list" :title="item" v-bind:key="index" :id="index" v-on:btn="pclick"></li-component>
</div><script>
Vue.component("li-component",{
props:['title','id'], //接收到的父组件的值
data:function(){
return {
count:0,
}
},
template:"<li v-on:click='child'>{{ title }}</li>", //子组件点击触发本组件的child方法
methods:{
child:function(){
this.$emit('btn',this.id) //btn为父组件定义的自定义事件 v-on:btn="pclick"
}
}
}) var vue = new Vue({
el:"#test",
data:{
list:[
'a','b','c','e','f','g','h'
]
},
methods:{
'pclick':function(id){
this.list.splice(id,1) //删除指定的下表元素
}
}
})</script>