<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id='app'>
<temp v-on:btn='tempclick'></temp> <!--监听子组件的事件-->
</div>
<template id="temp">
<div>
<button v-for="item in list" @click="btnclick(item)">{{item.name}}</button>
</div>
</template>
<script>
const temp = {
template:'#temp',
props:['movies'],
data(){
return {
list:[
{id:1,name:'黄色'},
{id:2,name:'绿色'},
{id:3,name:'蓝色'},
{id:4,name:'红色'}
]
}
},
methods:{
btnclick(item){
this.$emit('btn',item); /*自定义事件并发射*/
}
}
}
const app = new Vue({
el:'#app',
data:{
message:'good',
movies:['river','dog','pig']
},
components:{
temp:temp
},
methods:{
tempclick(item){
console.log(item)
}
}
})
</script>
</body>
</html>
vue 组件化 父子通信 子传父
最新推荐文章于 2024-08-02 09:29:40 发布