子组件向父组件传递数据
基本介绍
上回我们说到父组件向子组件传递数据是通过props传递数据的。那么子组件怎么和父组件通信呢？
通过自定义事件的方式
父组件的v-on不仅可以监听原生的dom事件比如click事件等等。也能监听子组件的任何事件。
<parent v-on:click="alert('luoyishizhu')">//监听原生的dom事件
<child v-on:adc="fun">//监听子组件的任何事件，这里监听子组件的adc事件，如果触发，则执行fun函数
</parent>
同时，子组件有个$emit的方法，这个方法传入一个事件名称，并且触发这个事件。
Vue.component("child",{
template:"<div><button @click="qaq"></button></div>",
methods:{
qaq:function()
{
this.$emit("fun")//这个地方就是创造一个自定义事件fun，这个自定义事件什么都没做，但是他通过$emit方法创建了这个事件，并且触发了这个事件，实际上这个事件啥也没干，类似一个信号弹，是打给父组件看的
}
}
})
触发这个事件后，父组件是可以通过v-on:指令检测到这个子组件的自定义事件，然后执行自己绑定的函数。
$emit("事件名",value)
首先，value是可传可不传的。他是通过事件抛出来的。抛出来给谁呢？
给父组件。父组件怎么访问到呢?
父组件在监听事件的时候可以通过$event访问到该数据，划重点，监听该事件的时候。说明我们可以在监听该事件要触发的js表达式或者是函数中使用他。而且如果后面不是js表达式而是一个函数，这个掏出的值会作为第一个参数传给这个函数。
TODOLIST删除功能
话不多说，我们新学会的知识实现一下ToDolist的删除功能吧！
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script> Vue.config.productionTip=false </script>
<title></title>
</head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click="addList">提交</button>
<ul>
<!-- <li v-for="(item,index) of list" :key="index">{{item}}</li> -->
<todoitem v-for="(item,index) of list" :key="index" :item="item" :index="index" @deleteitem="deleteitem"></todoitem>
</ul>
</div>
<script>
Vue.component("todoitem",{
template:'<li @click="deleteitem">{{item}}{{index}}</li>',
props:["item","index"],
methods:{
deleteitem:function()
{
this.$emit("deleteitem",this.index);
}
}});
new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:
{
addList:function()
{
if(this.inputValue)
{
this.list.push(this.inputValue);
this.inputValue="";
}
},
deleteitem:function(index)
{
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>
这大概就是一套完整的todolist代码了~
题外话，当你运行vue的时候老是报一个错：
应该怎么处理呢？
<script> Vue.config.productionTip=false </script>加在vue.js的下方。
