vue父组件引入子组件_vue子组件传递方法给父组件

大家好，又见面了，我是你们的朋友全栈君。

子组件代码

代码语言：javascript复制

<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>

父组件代码

代码语言：javascript复制

<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: '&#xe660;',title: 'Blog'},
				{id: 2,iconfont: '&#xe656;',title: 'Music'},
				{id: 3,iconfont: '&#xe636;',title: 'Dome'},
				{id: 4,iconfont: '&#xe62f;',title: 'Me'}
			]
		};
	},
	components: {
		"cube-nav-item": CubeNavItem
	},
	methods: {
		goToView: function(title,event){
			alert(title);
			console.log(event);
		}
	}
}
</script>

<style scoped >
</style>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

互联网 全栈

0 人点赞