短视频开发 graph sqlalchemy bootstrap管理模板 angular视频 list获取最后一个元素 android富文本框架 websocket库 python随机数 python如何实现多线程 python在线教程 python字典添加 java开发环境 java查找字符串 javastring类型 java中的继承 java时间戳转换 java八大基本数据类型 linux服务器 linux目录系统 javascript源代码 ie模拟器 嵌入式linux驱动程序设计从入门到精通 凯立德地图免费下载 unix操作系统下载 groupby 亚索刀光特效包 dnf刷什么图赚钱 英雄联盟崩溃 蓝牙测试软件 烧饼修改器打不开 ios删除描述文件 大势至usb控制系统 加字幕的软件 ps渐变工具在哪里 java游戏高级编程 upnp阻塞 360极速浏览器官方下载 baidupan pr特效插件
当前位置: 首页 > 学习教程  > 编程语言

vue中子组件向父组件传递data数据和方法(ref属性)

2020/12/5 9:36:48 文章标签:

子组件传递父组件的方法 1.给子组件设置ref属性 /*子组件*/ components:{com1:{template:"#month",data(){return{sonmsg:"我是子组件的data数据 sonmsg"}},methods:{sonfunc(){alert("我是子组件里的sonfunc方法")}}} }2.在子组件里设置 ref属…

在这里插入图片描述

子组件传递父组件的方法

1.给子组件设置ref属性

/*子组件*/
components:{
	com1:{
		template:"#month",
		data(){
			return{
				sonmsg:"我是子组件的data数据 sonmsg"
			}
		},
		methods:{
			sonfunc(){
				alert("我是子组件里的sonfunc方法")
			}
		}
	}
}

2.在子组件里设置 ref属性,到时候父组件可以通过 ref属性来获取子组件

<!--父组件-->
<template>
	<com1 ref="com1"></com1>
	<button @click="fashowmsg">点击我显示子组件的data数据</button>
	<button @click="fashowfunc">点击我显示子组件的方法</button>
</template>

3.父组件使用 this.$refs.ref值 来获取子组件

实际上不仅仅是子组件,在 vue实例里面的任意一个DOM元素都可以通过 ref属性 来获取,因此比较方便,当父组件获取子组件的时候,就可以调用子组件里边的私有data数据和私有方法

methods:{
	show(){
		alert(this.$resf.h1.innerText)
	},
	fashowmsg(){
		alert(this.$refs.com1.sonmsg)
	},
	fashowfunc(){
		this.$refs.com1.sonfunc
	}
}

本文链接: http://www.dtmao.cc/news_show_450020.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?