<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--
v-on不仅仅可以用于监听dom事件，也可以用于组件间的自定义事件
自定义事件的流程：
在子组件中，通过$emit()来触发事件
在父组件，通过v-on来监听子组件事件
-->
<!--父组件模板-->
<div id="app">
<cpn @itemclick="cpnclick"></cpn><!--使用自定义事件-->
</div>
<body>
<!--子组件模板-->
<template id="cpn1">
<div>
<button v-for="item in categories" @click="btnclick(item)">
{{item.name}}
</button>
</div>
</template>
<script src="vue.js"></script>
<script>
// <!-- 子组件-->
const cpn={
template: '#cpn1',
data(){
return {
categories:[
{id:'aa',name:'热门推荐'},
{id:'bb',name:'手机数码'},
{id:'aa',name:'热门推荐'},
{id:'aa',name:'热门推荐'},
{id:'aa',name:'热门推荐'}
]
}
},
methods:{
//发射事件
btnclick(item){
// this.$emit('itemclick')
this.$emit('itemclick',item)/*当有item参数时就会默认将其 传递过去*/
}
}
};
//父组件
const app=new Vue({ /*看成root组件*/
el:'#app',
data:{
info:{
name:'why',
age:19,
height:22
}
},
components:{
cpn
},
methods: {
cpnclick(item){
console.log(item )
}
}
})
</script>
</body>
</html>
子组件向父组件传递
猜你喜欢
转载自www.cnblogs.com/Damocless/p/11915267.html
今日推荐
周排行