Vue中组件之间互相传参数的方法

最新推荐文章于 2022-10-24 10:49:10 发布
最新推荐文章于 2022-10-24 10:49:10 发布
阅读量596 收藏
点赞数
分类专栏： vue 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33759361/article/details/112005719
版权
本文详细介绍了Vue中组件间通信的多种方式，包括父组件向子组件传值、子组件向父组件传值、使用refs进行通信以及兄弟组件间通过事件总线（订阅发布模式）传递数据。示例代码展示了如何利用属性props、$emit、$refs以及v-model实现数据流动，帮助开发者更好地理解和运用Vue组件间的通信机制。
摘要由CSDN通过智能技术生成

vue中组件互相传值的方法

  • 父组件给子组件传值
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue-组件之间的传递信息</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- 传布尔值的时候需要在前面加一个： -->
			<mychild title="首页" :msg='msg' :myshow=true title='首页'></mychild>
			<mychild title="购物车" :msg='msg' :myshow=true title='返回'></mychild>
			<mychild title="返回" :msg='msg' :myshow=false title='购物车'></mychild>
		</div>
		<script type="text/javascript">
			// 创建全局组件
			Vue.component("mychild", {
				template: "<div v-if='myshow'>导航-{{title}}-{{msg}}</div>",
				// props:['title','myshow'] // 直接接收父组件传过来的数据
				// 给父组件传过来的值设置一个类型 ,如果传过来的不是类型，会抛出一个异常
				// props: {
				// 	title: String,
				// 	myshow: Boolean
				// }
				// 给组件设置默认值
				props: {
					title: {
						type: String,
						default: ''
					},
					myshow: {
						type: Boolean,
						default: true
					},
					msg: {
						type: String,
						default: ''
					}
				}
			})
			let vue = new Vue({
				el: "#box",
				data: {
					'msg': '动态的传值'
				}
			})
		</script>
	</body>
</html>
  • 子组件给父组件传值
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>子组件给父组件传递信息</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="box">
		<child @myevent="fatherClick"></child>
	</div>
	<script type="text/javascript">
		Vue.component("child",{
		data () {
			return {
				money: 100000
			}
		},
		template: `
			<div style="background-color:white">
				<button @click="handlerClick">点我给父组件传值</button>
			</div>
			`,
		methods:{
			handlerClick () {
				let _this = this;
				_this.$emit('myevent',_this.money)
			}
		}
				
		})
	</script>
	<script type="text/javascript">
		let mv = new Vue({
			el: "#box",
			methods:{
				fatherClick (data) {
					console.log('哈哈',data)
				}
			}
		})
	</script>
</body>
</html>
  • 使用refs方法进行传值
      <!DOCTYPE html>
  	<html>
  		<head>
  			<meta charset="utf-8">
  			<title>vue-refs</title>
  			<script type="text/javascript" src="../js/vue.js">	</script>
  		</head>
  		<body>
  			<div id="box">
  				<!-- 如果把ref放在了标签上面，拿到的就是原生DOM -->
  				<!-- 如果把ref放在了组件上面，拿到的就是组件对象 -->
  				<input type="text" ref="myinpupt">
  				<button type="button" @click="handlerClick">add</button>
  				<child ref='mychild'></child>
  			</div>
  			<script type="text/javascript">
  				Vue.component('child',{
  					template: `
  							<div style="background-color:red">
  							</div>
  							`,
  					methods:{},
  					data () {
  						return {
  							childname: '1111111111111111111111'
  						}
  					}
  				})
  			</script>
  			<script type="text/javascript">
  				let mv = new Vue({
  					el: '#box',
  					methods:{
  						handlerClick () {
  							console.log(this.$refs)
  							// 通过refs的值进行修改
  							this.$refs.mychild.childname = '22222222222222222222'
  						}
  					}
  				})
  			</script>
  		</body>
  	</html>
  	```
  • 兄弟组件在进行传值的时候，不能相互传值的，需要找到一个中间人
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订阅分发模式</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<child1></child1>
			<child2></child2>
		</div>
		<script type="text/javascript">
			let bus = new Vue; // 当我们想使用订阅发布模式的时候，需要先创建一个vue的实例
			Vue.component('child1',{
				template: `<div><button @click='handlerClick'>点我给兄弟组件传值</button></div>`,
				data () {
					return {}
				},
				methods:{
					handlerClick(){
						bus.$emit('dingyue','这里是给订阅者的值')
					}
				},
				mounted () {
					// vue的生命周期，表示当vue的这个组件加载完毕后会自动执行这个方法
				}
			})
			
			Vue.component('child2',{
				template: `<div>{{data}}</div>`,
				data () {
					return {
						data: ''
					}
				},
				methods:{},
				mounted () {
					// vue的生命周期，表示当vue的这个组件加载完毕后会自动执行这个方法
					bus.$on('dingyue', res => {
						this.data = res;
						console.log('aaaaaaa',res)
					})
				}
			})
		</script>
		<script type="text/javascript">
			let mv = new Vue({
				el: "#box"
			})
		</script>
	</body>
</html>
  • 使用v-model传值
    1.父传子
    	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用v-model传值</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- v-model相当于 <input type="text" : ="myinput" @input="">-->
			<input type="text" v-model="myinput1">
			<child v-model="myinput1"></child>
		</div>
		<script type="text/javascript">
			Vue.component('child', {
				template: `<div class="box">
						<label>{{value}}</label>
						<input type="text" v-model="myinput" @input="handlerInput">
						<button>点我一下试试</button>		
						</div>`,
				methods: {
					handlerInput () {
						this.$emit("input",this.myinput)
					}
				},
				props: ['value'],
				data() {
					return {
						myinput: '',
					}
				},

			})
		</script>
		<script type="text/javascript">
			let vue = new Vue({
				el: "#box",
				data: {
					myinput1: "default"
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>
  1. 子传父
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用v-model子传父</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- v-model相当于 <input type="text" : ="myinput" @input="">-->
			<input type="text" v-model="myinput1">
			<child v-model="myinput1"></child>
			<button @click="heandliClick">提交</button>
		</div>
		<script type="text/javascript">
			Vue.component('child', {
				template: `<div class="box">
						<label>{{value}}</label>
						<input type="text" v-model="myinput" @input="handlerInput">
						</div>`,
				methods: {
					handlerInput() {
						this.$emit("input", this.myinput)
					}
				},
				props: ['value'],
				data() {
					return {
						myinput: '',
					}
				},

			})
		</script>
		<script type="text/javascript">
			let vue = new Vue({
				el: "#box",
				data: {
					myinput1: "default"
				},
				methods: {
					heandliClick() {
						console.log(this.myinput1)
					}
				}
			})
		</script>
	</body>
</html>
攒钱买房的迪迦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件间数据传递的方式(3种)
10-15
主要介绍了Vue组件间数据传递的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue组件之间的参数传递
weixin_43919497的博客
05-02 5838
vue组件之间的参数传递：父传子。 先在子组件中通过props：[参数]设参，然后在父组件中通过<组件标签 :参数名=“要赋予的值”></组件标签>传参，最后在子组件中接参。 props是表示组件的参数部分，那么props有两种写法： props:[“参数列表”] 比如：props:[‘prop01’,‘pro02’,‘pro03’,…] props:{参数名1：{type:参数类型,required:是否是必须的参数true或者false,default:默认值},参数名2：｛
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前端、python爱好者
10-24 7697
1. props 和 emits传参 2. 路由传参（query、params） 3. 第三方库（pubsub-js）
Vue组件间的参数传递
weixin_43720534的博客
04-30 670
Vue组件间的参数传递 1、父组件与子组件传值 父组件传给子组件：子组件通过props方法接受数据； 子组件传给父组件： $emit 方法传递参数 2、非父子组件间的数据传递，兄弟组件传值 eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道）。 ...
Vue.js中兄弟组件之间互相传值实例
10-19
本文介绍了Vue.js中兄弟组件之间互相传值的一个实例，通过建立一个中央事件总线（Central Event Bus），也被称为中转站，来实现兄弟组件间的通信。 首先，需要了解的是，在Vue.js中，组件通过声明式的嵌套来构建...
vue组件之间数据传递的方法实例分析
10-17
Vue组件之间的数据传递遵循单一数据流的原则，确保了组件间的数据流向清晰且易于跟踪。通过使用`props`从父组件向子组件传递数据，以及通过`$emit`从子组件向父组件传递数据，开发者可以有效地实现组件间的通信。 ...
vue 组件简介
10-15
Vue组件是Vue.js框架中的核心概念之一，它允许开发者将用户界面分解成独立、可复用的部分。组件化是前端开发中的一种重要思想，它有助于提高开发效率、方便代码复用、简化调试过程、提升项目可维护性以及便于团队...
Vue.js中的组件系统
10-16
这就是Vue组件系统中复用性的一个基本原则。 在实例代码中，我们看到组件的模板内容是通过template属性定义的。Vue.js允许开发者使用模板字符串、单文件组件（.vue文件）等来定义组件的模板内容。模板中可以使用...
Vue拖拽组件开发实例详解
12-01
一个基本的Vue组件结构包括模板（template）、逻辑代码（script）和样式（style）三部分，其中style通常使用scoped属性确保样式仅作用于当前组件，避免样式冲突。 当我们需要开发一个Vue移动拖拽组件时，理解拖拽的...
Vue 组件间传值及事件触发Demo
09-07
Vue 组件间传值及事件回调
Vue 组件之间参数传递
qq_29039853的博客
05-12 170
https://www.jb51.net/article/132371.htm
Vue学习（四）组件之间传参数
热水钟博客
07-05 4769
一、父组件传参给子组件二、子组件传参给父组件
Vue_组件参数传递
m0_53077733的博客
04-19 970
# Vue_组件参数传递
vue组件之间的传参
紫冰的博客
05-19 217
我们在写组件时，不可避免的需要用到传参。我在这里说明一下我们一般用到最多的2中传参。 1、父传子 在父组件中的子组件标签上绑定一个自定义属性，这个自定义属性的值就是我们要传递的参数。 <heads :data="list" /> // 比如这是我们注册好的子组件标签 <script> export default { data(){ return { list:["数据1","数据2","数据3",] } } } </script> 我们
vue组件间传递数据的几种方式
A081127的博客
03-18 1524
一.父传子 子组件通过props属性接收 // 在子组件内定义组件接收一个参数 name { props: ['name'] } // 父组件使用组件时传递参数 name <child :name="name"></child> 二.子传父 通过$emit 传递数据给父元素 // 子组件定义事件 this.$emit('事件名称', '传递的参数') //例： this.$emit('add', 111) // 父组件监听事件的触发 <child...
vue组件间的5种传值方式
qsj0606的博客
07-30 946
父组件向子组件传值： 比如有一个 Father.vue 的父组件要传值给 Children.vue 的子组件，完成共需四步： 父组件 Father.vue 内容，注意里面的操作步骤： <template> <div> <h2>父组件区域</h2> <hr /> <!-- 第二步：在引用的子组件标签里定义 :num="num" , num就是要传递的变量--> <Children :num="n
vue 子组件调用父组件方法传参数
最新发布
08-30
在Vue中，实现子组件调用父组件方法并传递参数的方法有多种。一种常见的方法是通过自定义事件来实现。首先，在子组件中使用$emit方法触发自定义事件，并传递参数。然后，父组件在模板中使用v-on指令监听该自定义事件，并在触发时调用相应的方法获取参数。 具体步骤如下： 1. 在子组件中，通过$emit方法触发自定义事件，并传递参数。例如，可以在需要调用父组件方法的地方使用$emit('customEvent', parameter)来触发自定义事件并传递参数。 2. 在父组件中，使用v-on指令监听该自定义事件，并在触发时调用相应的方法。例如，可以在父组件的模板中使用v-on:customEvent="methodName"来监听名为customEvent的自定义事件，并在触发时调用methodName方法。 3. 在父组件的方法中，通过参数接收子组件传递的值。例如，在methodName方法中，可以使用参数来接收子组件传递的值。 下面是一个示例代码，展示了如何在Vue中实现子组件调用父组件方法传递参数的过程： 父组件代码： ``` <template> <div> <child-component @customEvent="handleCustomEvent"></child-component> </div> </template> <script> import ChildComponent from 'path/to/ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleCustomEvent(parameter) { // 在这里处理子组件传递的参数 console.log(parameter); } } } </script> ``` 子组件代码： ``` <template> <div> <button @click="callParentMethod">调用父组件方法</button> </div> </template> <script> export default { methods: { callParentMethod() { // 通过$emit触发自定义事件，并传递参数 this.$emit('customEvent', '参数值'); } } } </script> ``` 在这个示例中，当子组件的按钮被点击时，它会调用callParentMethod方法，然后通过$emit('customEvent', '参数值')触发自定义事件，并传递参数。父组件通过@customEvent="handleCustomEvent"监听自定义事件，并在触发时调用handleCustomEvent方法，接收子组件传递的参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【vue2】子组件向父组件传参方法汇总](https://blog.csdn.net/weixin_44431073/article/details/125006029)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue - 父子组件互相传参、调用](https://blog.csdn.net/hutuyaoniexi/article/details/127651959)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值