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

vue父组件引入子组件_vue子组件传递方法给父组件子组件代码<template> <divclass=”item”@click=”gotoView($event)”> <divclass=”iconfont-box”> <slot></slot> </div> <divclass=”title”>Blog</div> </div></template><script>export

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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: '&#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>

 

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189026.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 我做游戏开发这八年[通俗易懂]

    我做游戏开发这八年简述与编程擦肩而过从图像设计到痴迷编程入门编程沉迷编程Java的图形编程就职游戏开发2011,第一次面试&实习生第一个游戏2012年,第二个重量级IP游戏2013年,转战手游与创业2014-2015,第一次创业2015,西山居和多益网络2016-2018,第二次创业2018至今,360游戏艺术(岂凡网络)技术总监简述这篇文章并不是想教会大家如何开发游戏,更不能教大家如…

  • 新式单片机视频教程下载

    新式单片机视频教程下载新式单片机视频教程下载点击此处进入下载页面【文件名称】——国内首创新式单片机视频教程【文件描述】单片机学习资料,新手绝佳教程….【注意事项】压缩包内为种子文件需使用BT类软件下载;转载自btpig.com。–注:1.本人发资源纯为与诸位共享,发布前均做过测试保证可用。2.如果下载后打不开请重新再试,可能是网络传输问题。3.如有疑问请访问【http://blog.csdn.net/soft

  • Linux杀死进程命令:kill、killall、pkill

    Linux杀死进程命令:kill、killall、pkillkill命令:   1.格式:kill[信号]进程id   2..查看经常信号:kill-l   3.常用命令:          平滑重启进程:kill-1进程id          强制杀死进程:kill-9进程id#查看进程可用psaux命令killall命令:   1.格式:killall[信…

  • python激活码(破解版激活)

    python激活码(破解版激活),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • idea最新激活码2021破解方法

    idea最新激活码2021破解方法,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Git 工具 – 高级合并「建议收藏」

    高级合并在Git中合并是相当容易的。因为Git使多次合并另一个分支变得很容易,这意味着你可以有一个始终保持最新的长期分支,经常解决小的冲突,比在一系列提交后解决一个巨大的冲突要好。然而,有时也会有棘手的冲突。不像其他的版本控制系统,Git并不会尝试过于聪明的合并冲突解决方案。Git的哲学是聪明地决定无歧义的合并方案,但是如果有冲突,它不会尝试智能地自动解决它。因此,如果很久之后才合并两个分叉的分支,你可能会撞上一些问题。在本节中,我们将会仔细查看那些问题是什么以及Git

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号