其他分享
首页 > 其他分享> > 子组件向父组件传递

子组件向父组件传递

作者:互联网

<!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>

标签:aa,name,向父,emit,传递,item,组件,id
来源: https://www.cnblogs.com/Damocless/p/11915267.html