<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 父组件模板 -->
<div id="app">
<cpn @itemclick="cpnclick"></cpn>
<!-- 监听子组件发射的事件名，监听到后调用函数 -->
</div>
<!-- 子组件模板 -->
<template id="cpn">
<div id="aaa">
<!-- 遍历按钮数组，每个按钮单独赋值 -->
<button v-for="item in categories"
@click="btnclick(item)"> <!-- 绑定点击事件调用函数 -->
{{item.name}} <!-- 每个值的名字显示（就是按钮名） -->
</button>
</div>
</template>
<script src="../js/vue.js"></script> <!-- 引用vue -->
<script type="text/javascript">
// 子组件
const cpn = {
template: '#cpn',
data(){
return {
categories:[
{id: 'aaa', name: '热门推荐'},
{id: 'aaa', name: '手机数码'},
{id: 'aaa', name: '家用家电'},
{id: 'aaa', name: '电脑办公'}
]
}
},
// 方法：存放函数
methods:{
btnclick(item){ // 按钮点击调用的函数
// console.log(item.name) // 打印item的名字
this.$emit('itemclick', item) // 发射事件名为：'itemclick'，参数为：item
}
}
}
// 父组件
const app = new Vue({
el: '#app',
data:{
message: '我是父组件'
},
components:{ // 注册子组件
cpn
},
methods:{
cpnclick(item){ // cpn被点击事件
console.log(item.name) // 打印按钮名称
}
}
})
</script>
</body>
</html>