<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小测试</title>
</head>
<body>
<div id="app">
<div style="border: 1px solid red; margin-bottom: 20px">
<h3>这是一个父组件</h3>
<h3>子组件发来讯息:{{name}}</h3>
</div>
<cpn :cmessage="message" @itemclick="appclick"></cpn>
</div>
</body>
<template id="cpn">
<div style="border: 1px solid red">
<h3>这是一个子组件</h3>
<p>{{cmessage}}</p>
<button v-for="item in filmlist" @click="cpnclick(item)">{{item.name}}</button>
</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script type="text/javascript">
const cpn = {
template: '#cpn',
data() {
return {
filmlist: [
{id: 1, name: '爱情片'},
{id: 2, name: '悬疑片'},
{id: 3, name: '恐怖片'},
{id: 4, name: '伦理片'}
]
}
},
props: {
cmessage: {
type: String,
default: ""
}
},
methods: {
cpnclick(item) {
this.$emit("itemclick", item);
}
}
}
const app = new Vue({
el: '#app',
data: {
message: 'Hello world',
name: ''
},
components: {
cpn
},
methods: {
appclick(item) {
this.name = item.name;
}
}
})
</script>
</html>