大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
子组件代码
<template>
<div class="item" @click="gotoView($event)" >
<div class="iconfont-box">
<slot></slot>
</div>
<div class="title">Blog</div>
</div>
</template>
<script>
export default{
name: 'CubeNavItem',
props: ["id","title"],
methods: {
gotoView: function($event){
this.$emit('fatherGoToView',this.title,$event);
}
}
}
</script>
<style scoped>
</style>
父组件代码
<template>
<div class="window-bg">
<div class="box">
<cube-nav-item @fatherGoToView="goToView" v-for="item in navList" :key="item.id" :id="item.id" :title="item.title">
<span class="iconfont item-iconfont" v-html="item.iconfont"></span>
</cube-nav-item>
</div>
</div>
</template>
<script>
import CubeNavItem from "@/components/CubeNavItem";
export default{
name: 'index',
data(){
return {
navList: [
{id: 1,iconfont: '',title: 'Blog'},
{id: 2,iconfont: '',title: 'Music'},
{id: 3,iconfont: '',title: 'Dome'},
{id: 4,iconfont: '',title: 'Me'}
]
};
},
components: {
"cube-nav-item": CubeNavItem
},
methods: {
goToView: function(title,event){
alert(title);
console.log(event);
}
}
}
</script>
<style scoped >
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/189026.html原文链接：https://javaforall.net
