<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 子传子父组件 -->
<!-- 父组件接受子组件发射过来的事件 -->
<div id="app">
<comp @fatherclickitem="compclickitem"></comp>
</div>
<template id="tem">
<!-- //在子组件内就收值 -->
<div>
<button v-for="item in categories" @click="clickitem(item)">{{item.name}}</button>
</div>
</template>
<script src="./vue.js"></script>
<script>
const comp={ //创建子组件
template:"#tem", //挂在子组件模板
props:{ //子组件接受父组件的值
},
data(){
return {
categories:[
{id:'111',name:'热门推荐'},
{id:'222',name:'手机电脑'},
{id:'333',name:'家具家电'},
{id:'444',name:'品牌大片'},
{id:'666',name:'娱乐败家'},
]
}
},
methods: {
clickitem(item){
this.$emit('fatherclickitem',item) //子组件发射事件---重点核心代码
}
}
}
const app = new Vue({
el: '#app',//用于要挂在的元素
data: {
message: '你好啊,黄金时代',
},
components:{ //挂载子组件到父组件上面
comp,
},
methods: {
compclickitem(item){ //父组件定义子组件的点击事件--并且接收子组件的参数,进行操作
console.log(item);
}
},
});
</script>
</body>
</html>
子传父--vue-template
最新推荐文章于 2024-03-13 15:48:59 发布