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)


相关推荐

  • 2021phpstorm 激活吗破解方法

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

  • 有计算机二级python证书可以做什么工作_python有证书考吗

    有计算机二级python证书可以做什么工作_python有证书考吗python以什么方式处理文件?很多同学想考python的证书,想知道Python有哪些含金量高的证书?一、全国计算机等级考试Python程序语言设计;二、PythonInstitute资格认证初级PCEP;三、PythonInstitute资格认证初级PCEP中级PCAP;四、PythonInstitute资格认证初级PCEP高级PCPP;五、工信部Python技术应用工程。毕业前最好都拿到手的证书,用处大!专业证书对于就读不同大学专业的同学而言,需要考取跟自己专业挂钩的专业证书,不相关的.

  • ioctl函数详解_lseek函数

    ioctl函数详解_lseek函数ioctl 函数 本函数影响由fd 参数引用的一个打开的文件。 #include<unistd.h>int ioctl(intfd,intrequest,…/*void*arg*/);返回0 :成功   -1 :出错 第三个参数总是一个指针,但指针的类型依赖于request 参数。我们可以把和网络相关的请求划分为6&nbsp…

    2022年10月17日
  • 在Pandas中,如何根据Group By 结果计算 Row Number

    在Pandas中,如何根据Group By 结果计算 Row Number例如我们有下面的数据,第一列是用户的ID,第二列是用户的购买日期,现在如果我们需要判断用户是否重复购买,并且,每一次的购买,下一次的购买时间间隔是多少呢?

  • 【一个整蛊人的小程序】c++,鼠标控制

    【一个整蛊人的小程序】c++,鼠标控制

  • windows窗体线程异常_指针在声明和使用时有何不同

    windows窗体线程异常_指针在声明和使用时有何不同在多线程设计中,许多人为了省事,会将对话框类或其它类的指针传给工作线程,而在工作线程中调用该类的成员函数或成员变量等等。但是在Debug版本时,在某些情况下,特别是在工作线程中调用pWnd->UpdateData(FALSE)时,会出现错误。这个错误的原因网上有许多地方讲

发表回复

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

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