Vue子组件向父组件传参过程中：
注意$emit后的函数名称自动给转换为小写了，例如deleteItem会自动转换为deleteitem,很坑。
<!DOCTYPE html>
<html>
<head>
<title>$data</title>
<meta charset="utf-8">
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="content">
<button v-on:click="btn">提交</button>
<ul>
<todo-list v-bind:content='item' v-bind:index='key' v-for="(item, key) in list" @delete='delContent'></todo-list>
</ul>
</div>
<script type="text/javascript">
var TodoList = {
props: ['content','index'],
template: "<li v-on:click='handleItemDelete'>{{content}}</li>",
methods: {
handleItemDelete: function() {
this.$emit('delete', this.index)
}
}
}
var vm = new Vue({
el: '#app',
data: {
content: 'hello',
list: []
},
methods: {
btn: function() {
this.$data.list.push(this.content)
console.log(this)
},
delContent: function(index) {
this.list.splice(index, 1)
}
},
components: {
TodoList:TodoList
}
})
</script>
</body>
</html>