子父之间的通信（this.$emit）
2019-04-11 本文已影响0人
Wo信你个鬼
1.在子组件中定义一个事件
2.在事件中通过emit定义事件
4.通过父组件注册事件获取数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<test @toparent="getSon"></test>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var test = {
template:`
<div>
<ul>
<li @click="getIndex(index)" v-for="(val,index) in list">{{val}}</li>
</ul>
</div>
`,
data:function(){
return {
list:["html","css","js"]
}
},
methods:{
getIndex(index){
console.log(index)
this.$emit("toparent",[index,this.list])
}
}
}
var app = new Vue({
el:'#app',
components:{
test
},
methods:{
getSon(res){
console.log({res})
}
}
})
</script>
</body>
</html>
