vue组件通信，子组件往父组件传递数据。

最新推荐文章于 2023-03-29 17:08:47 发布

l_aaaaaa

最新推荐文章于 2023-03-29 17:08:47 发布

阅读量108

点赞数

文章标签： vue react js

本文链接：https://blog.csdn.net/l_aaaaaa/article/details/106921947

版权

实现是this.$emit(‘随便定义的方法名’,要穿的参数); 来实现的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div id="app">
			<cpn @fclick="fclick1"></cpn>
		</div>
		<template id="cpn">
			<div>
				<button v-for="item  in books"
				 @click="cclick(item)">{{item.name}}</button>
			</div>
		</template>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//定义一个子组件  
			const cpn={
				template:'#cpn',
				data(){
					return {
						books:[
						  {
							  id:'11',
							  name:'二十四史'	
						  },
						  {
							  id:'12',
							  name:'史记'
						   }
						]
					}
				},
				methods:{
					cclick(item){
						// console.log(item);
						//自定义事件
						this.$emit('fclick',item);
					}
				}
			}
			//将vue作为父组件
			const  app = new Vue({
				el:'#app',
				data:{
					
				},
				components:{
					cpn
				},
				methods:{
					fclick1(item){
						console.log(item);
					}
				}
			})
			/**
			 * 总结子组件往父组件传递数据
			 * 1.先定义一个子组件和父组件
			 * 2.在子组件中定义一个方法，方法中定义一个函数。
			 * 用 this.$emit('随便定义的方法名',要穿的参数);
			 * 3.在子组件中定义一个点击事件，这个事件也就是对应第2步的方法。
			 * 4.在父组件的作用域中的子组件标签上用v-on监听this.$emit('随便定义的方法名',要穿的参数);中
			 * 的'随便定义的方法名'如此例子的
			 * 	<cpn @fclick="fclick1"></cpn>
			 * fclick=随便定义的方法名,
			 * fclick1为父组件中定义的接收子组件传递参数的方法。
			 */
		</script>
	</body>
</html>

l_aaaaaa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件通信，子组件往父组件传递数据。

实现是this.$emit(‘随便定义的方法名’,要穿的参数); 来实现的。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <div id="app"> <cpn @fclick="fclick1"></cpn> </div> <template id="cpn"
复制链接

扫一扫