<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn v-on:itemclick="cpnClick"></cpn>
</div>
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick">{{item.name}}</button>
</div>
</template>
<script src="./js/vue.js">
</script>
<script>
//子组件
const cpn = {
template: '#cpn',
// props: ['cmovies', 'cmessage'],
data() {
return {
categories: [{
id: 'aaa',
name: '热门推荐',
}, {
id: 'bbb',
name: '本机数码',
}, {
id: 'ccc',
name: '哈哈推荐',
}, {
id: 'ddd',
name: '哥哥哥哥',
}]
}
},
methods: {
btnClick(item) {
// console.log(item) 发射时间
this.$emit('itemclick')
}
}
}
const app = new Vue({
el: '#app',
data: {
info: {
name: 'geyao',
age: 18,
height: 1.88
}
},
components: {
'cpn': cpn
},
methods: {
cpnClick() {
console.log('cpnClick')
}
}
})
</script>
</body>
</html>运行结果
