vue子组件数据传送到父组件示例

最新推荐文章于 2023-07-07 10:02:15 发布

Gjanuary

最新推荐文章于 2023-07-07 10:02:15 发布

阅读量485

点赞数

分类专栏：前端学习记录文章标签： vue

本文链接：https://blog.csdn.net/Gjanuary/article/details/117440899

版权

前端学习记录专栏收录该内容

75 篇文章 0 订阅

订阅专栏

逻辑：
1.创建一个变量sonCompoent
2.在根实例中声明变量sonCompoent是一个子组件
3.根实例进行挂载id为app的节点上
4.创建一个app的div节点
5.给sonCompoent中data一个值用于传送给父组件
6.在子组件中加一个template中加一个按钮并进行按钮绑定  方便触发方法，然后把数据传送给父组件即可
7.方法中用$emit("监测的名字",需要传送的数据)
8.在html的子组件调用中去监测一下上面监测名字的值，然后 根据值得变化传送到父亲的给方法中
----------------------------------------------------------------------------------
完整代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="vue.js" charset="utf-8"></script>
</head>
<body>
	<div id="app" >
		<!-- 用于监测tk的变化，ecplet用来进行接受和处理 -->
		<child-son @tk="ecplet"></child-son>
	</div>

	<script type="text/javascript">
	<!-- 创建一个子组件，并且给这个组件一个初始值用来接下来传送到父组件上 -->
	var childSon = {
		data(){
			return{
				/*需要传送的值*/
				childata:'this is a childdata',
			}	
		},
		/*创建这个按钮方便点击的时候触发，把数据返回*/
		template:'<button  @click="sonclick">提交</button>',
		methods:{
			sonclick:function(){
				/*$emit把值进行返回*/
				return this.$emit('tk',this.childata)
			}
		}
	}
	new Vue({
		el:'#app',
		components:{
			childSon
		},
		methods:{
			/*用于接收 和处理*/
			ecplet:function(c){
				console.log(c)
			}
		}
	})
	</script>
</body>
</html>

效果

Gjanuary

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue子组件数据传送到父组件示例

逻辑：1.创建一个变量sonCompoent2.在根实例中声明变量sonCompoent是一个子组件3.根实例进行挂载id为app的节点上4.创建一个app的div节点5.给sonCompoent中data一个值用于传送给父组件6.在子组件中加一个template中加一个按钮并进行按钮绑定方便触发方法，然后把数据传送给父组件即可7.方法中用$emit("监测的名字",需要传送的数据)8.在html的子组件调用中去监测一下上面监测名字的值，然后根据值得变化传送到父亲的给方法中----.
复制链接

扫一扫