vue组件通信（props、$emit、$refs和is）

最新推荐文章于 2022-10-24 11:58:32 发布
最新推荐文章于 2022-10-24 11:58:32 发布
阅读量231 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/remakez/article/details/120972170
版权

vue组件通信（props、$emit、$refs和is）

父传子props

使用组件的props属性实现父组件给子组件传数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<body>
		<!-- 父组件 -->
		<div id="app">
			<cpn :cmovies="movies" :cmessage="message"></cpn>
		</div>

		<!-- 子组件 -->
		<template id="cpn">
			<div>
				<ul>
					<li v-for="(item,index) in cmovies" :key="item">{{item}}</li>
				</ul>
				<h2>{{cmessage}}</h2>
			</div>
		</template>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data(){
					return{
						message:"你好",
						movies:["复仇者联盟", "钢铁侠", "星际穿越", "哪吒传奇"]
					}		
				},
				components:{
					cpn:{
						template:"#cpn",
						// props:['cmovies', 'cmessage'],//数组写法
						props:{
							cmessage:{
								type:String,//传的数据类型
								required:true//在使用组件必传值
							},
							cmovies:{
								type: Array,
							},
						}
					}
				}
			})
		</script>
	</body>
</html>

这里父组件给子组传了一个字符message、一个数组movies。

子传父$emit

子组件向父组件传值，使用自定义事件 $emit

		<!-- 父组件 -->
		<div id="app">
			<!-- <cpn @itemclick="cpnclick"></cpn> -->
			<!-- 子组件传的数据itemclick，父组件使用cpnclick方法进行使用，这里不用填参数 -->
			
			<cpn @itemclick="cpnclick(arguments)"></cpn>
			<!-- 这里使用arguments接受数据 -->
		</div>
		
		<!-- 子组件 -->
		<template id="cpn">
			<div>
				<button v-for="(item,index) in categoties" :key="item.id" @click="btnClick(item,index)">{{item.name}}</button>
			</div>
		</template>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data() {
					return {}
				},
				watch: {

				},
				methods: {
					cpnclick(arguments){
						console.log(arguments)
						console.log(arguments[0])//item
						console.log(arguments[0].name)
						console.log(arguments[1])//index
						// console.log('cpnClick'+item.name+'---'+index)
					}
				},
				components: {
					cpn: {//创建局部子组件
						template: "#cpn",
						data() {
							return {
								categoties: [{
										id: 'aaa',
										name: '热门推荐'
									},
									{
										id: 'bbb',
										name: '手机数码'
									},
									{
										id: 'ccc',
										name: '家用家电'
									},
									{
										id: 'ddd',
										name: '电脑办公'
									},
								] 
							}
						},
						methods: {
							btnClick(item,index) {
								this.$emit('itemclick', item,index)//传值给父组件
							}
						}
					},
				}
			})
		</script>

在这里插入图片描述
1.在子组件中定义一个方法btnClick(item)，使用$emit，'itemclick’是事件名，item是传过去的值。在子组件中监听点击事件并回调此方法；
2.在父组件中定义一个方法cpnClcik(item) ，并在父组件（vue实例）中调用<cpn @itemclick="cpnClcik"></cpn>（不写参数默认传递btnClick的item ），父组件监听事件名为itemclick的子组件传过来的事件；

父子组件的值双向绑定

这里主要使用watch进行监听

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title> 
	</head>  
	<body>
		<!-- 父组件 -->
		<div id="app">
			<cpn :number1="num1" :number2="num2" @num1change="num1Change" @num2change="num2Change"></cpn>
			<hr>
			<h2>父组件num1:{{num1}}</h2>
			<input type="text" v-model="num1">
			<h2>父组件num2:{{num2}}</h2>
			<input type="text" v-model="num2">
			<hr >
		</div>

		<!-- 子组件 -->
		<template id="cpn">
			<div>
				<h2>number1:{{number1}}</h2>
				<h2>datanum1:{{datanum1}}</h2>
				<input type="text" v-model="datanum1">
				<!-- 子组件不能直接使用props内的值 -->
				<h2>number2:{{number2}}</h2>
				<h2>datanum2:{{datanum2}}</h2>
				<input type="text" v-model="datanum2">
			</div>
		</template>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data() {
					return {
						num1: 1,
						num2: 2
					}
				},
				methods: {
					//接收子组件传来的值后，赋给num
					num1Change(value) {
						this.num1 = value
					},
					num2Change(value) {
						this.num2 = value
					},
				},
				components: {
					cpn: {
						template: "#cpn",
						data() {
							return {
								datanum1: this.number1, //子组件同样要加this
								datanum2: this.number2
							}
						},
						props: {
							number1: {
								type: [String, Number]
							},
							number2: {
								type: [String, Number]
							},
						},
						watch: {
							//监听datanum的值，发生改变时，传给父组件
							datanum1(newValue) {
								this.$emit('num1change', newValue)
							},
							datanum2(newValue) {
								this.$emit('num2change', newValue)
							},
							
							//监听number即num的值，发生改变时，改变datanum
							number1(newValue) {
								this.datanum1 = newValue
							},
							number2(newValue) {
								this.datanum2 = newValue
							}
						}
					},
				}
			})
		</script>
	</body>
</html>

父子组件的值双向绑定:
1.父组件app下num1、num2用props传给子组件cpn，cpn用number1、number2接收；
2.cpn用data把number1、number2赋给datanum1、datanum2（因子组件不能直接操作props内的值），而后把datanum1、datanum2与input输入框用v-model双向绑定；
3.在cpn中在watch下监听datanum1、datanum2，一旦变化，则用$emit()传给父组件app，app使用num1change、num2change接收，赋给num1、num2；而后回到第1步，第1步执行完后，number1、number2发生变化会触发cpn下的watch监听number1、number2，再将其赋值给datanum1、datanum2，改变了datanum1、datanum2。
4.最终形成闭环，改变任一方的值，都会牵动其他值的改变

在这里插入图片描述

父访问子 ref

$refs方式：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

ref的基本使用 用在元素上
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
          <p ref="p" @click="handelClick" id="ppp">hello</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					
				},
				methods: {
                 handelClick(){
					 console.log(this.$refs.p);
					 //两种方法都可获取p标签
					 const ppp = document.querySelector('#ppp')
					 console.log(ppp);
				 }
				},
			})
		</script>
	</body>
</html>
ref在子组件上的使用

ref 可以调用组件中的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
           <counter ref="one" @change="handelChange"></counter>
		   <counter ref="two" @change="handelChange"></counter>
		   <div>total:{{total}}</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			Vue.component('counter',{
				template:'<div @click="handelclick">{{number}}</div>',
				data(){
					return {
						number:0
					}
				},
				methods:{
					handelclick(){
						this.number++;
						this.$emit('change');
					}
				}
			})
			const app = new Vue({
				el: "#app",
				data: {
					total:0
				},
				methods: {
                 handelChange(){
					 this.total = this.$refs.one.number + this.$refs.two.number
				 }
				},
			})
		</script>
	</body>
</html>

ref 可以调用组件中的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
          <hello-world ref="hello"></hello-world>
		   <button @click="getHello">获取helloworld组件中的值</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			Vue.component('helloWorld',{
				template:`<div>helloWorld</div>`,
				data(){
					return {
						number:0
					}
				},
				methods:{
					handelClick(){
						console.log('我是子组件的方法');
					}
				}
			})
			const app = new Vue({
				el: "#app",
				data: {
					
				},
				methods: {
                 getHello(){
					console.log(this.$refs.hello.handelClick)//子组件方法
					console.log(this.$refs.hello.$el.innerHTML);//helloWorld
				 }
				},
			})
		</script>
	</body>
</html>
is用于动态组件且基于 DOM 内模板的限制来工作。

基于 DOM 内模板的限制来工作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>is基于 DOM 内模板的限制来工作</title>

	</head>
	<body>
		<div id="app">
          <table>
			  <tr is="row">
			  </tr> 
		 <!-- <row></row> 这样写tr会在table外面-->
		  </table>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			Vue.component('row',{
				template:'<tr><td>111</td></tr>'
			})
			const app = new Vue({
				el: "#app",
				data() {
					return {}
				},
			})
		</script>
	</body>
</html>

动态组件component

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- <child-one></child-one>
			<child-two></child-two> -->
			<component :is="type"></component>
			<button @click="handerClick">点击切换</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		 <script>
			 Vue.component('cpn1',{
				 template:'<div>child-one</div>'
			 })
			 Vue.component('cpn2',{
			 	template:'<div>child-two</div>'
			 })
			const app = new Vue({
				el:'#app',
				data(){
					return {
						type:'cpn1'
					}
				},
				methods:{
					handerClick(){
						this.type=this.type==='cpn1'?'cpn2':'cpn1';
					}
					
				}
			}) 
			 
		 </script>
	</body>
</html>

is后的type代表组件名，通过改变type（组件名），来切换显示组件

remakez
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
22-vue 组件通信的五种方式(总结)：props、自定义事件、ref\refs 、消息的订阅与发布(pubsub-js库)、slot插槽法
code^_^熊的博客
02-13 425
第一种 props   父组件用 ：（v-bind的简写）传递，子组件用 props 来接收，并注明类型 代码示例 父组件代码： <template> <TodoHeader :addTodo="addTodo"/> </template> 子组件代码： export default{ props:{ addTodo：Function } } this.$emit(“方法名”，方法中参数) 第二种 自定义事件   父组件用@(v-on的简写)来绑定事件，
vue组件间通信的实现方式，父组件可以通过props属性将数据传递给子组件，子组件可以通过$emit方法触发父组件定义的事.md
最新发布
06-13
1. 父子组件通信：父组件可以通过props属性将数据传递给子组件，子组件可以通过$emit方法触发父组件定义的事件。 2. 子组件访问根组件：可以使用provide/inject来实现子组件访问根组件的数据。 3. 兄弟组件通信：...
父组件和子组件通信[一][props 和 ref($refs)]
qq_26239917的博客
05-23 345
props 是父组件把自己的值传给子组件，再改变父组件属性值，从而改变子组件属性值 ref 写在DOM元素上是指向DOM 写在子组件上指向子组件，通过这个$ref改变子组件的属性值和调用它的函数就可以实现父子组件的简单通信 ...
Vue组件通信（props，refs）
最爱喝怡宝的博客
12-16 704
父子组件的通信（通讯） （组件的通信 是vue核心之一） 组件是vue的核心，组件的通信是vue的核心的核心 通信：数据的“动态的实时的”传递 父传子 父传子:（子组件中）props属性-----父用子的时候 通过 属性 传递 1.先创建根组件和一个局部组件，在根组件中注册局部组件，让局部组件成为根组件的子组件 <body> <div id="app"> <one></one> </div>
vue 父子组件通讯--props,refs(muse-ui,vue.js2.0)
yu2015java的博客
09-04 858
<client-pop-update ref="clientPopUpdate" title='编辑客户' :name="updateName" :tel="updateTel" :addr="updateAddr" :id="updateId" :index="updateIndex" :money="updateMoney" v-on:getUpd
Vue —— 进阶脚手架（一）（refs属性、props配置项）
HuoZhiyan 的博客
05-09 895
文章目录一、refs 属性1. refs 的作用2. 应用的方面3. 使用方式4. 实例：打印输出 DOM 元素二、配置项 props三、混入 mixin四、插件 plugins五、样式 scoped 一、refs 属性 1. refs 的作用 被用来给元素或组件注册引用信息（id 的替代者）。 2. 应用的方面 应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上是组件实例对象（vc）。 3. 使用方式 //打标识 <h1 ref="xxx">...</h1
vue 父组件通过$refs获取子组件的值和方法详解
12-13
子传父：在父组件中监听一个事件，在子组件中利用$emit触发这个事件并带上数据作为第二个参数，这时父组件中监听事件的回调函数就会被调用，回调函数的参数就是子组件带上来的数据，这样就可以在父组件中使用子组件...
总结了-Vue3-的七种组件通信方式-别再说不会组件通信了.docx
12-18
在 Vue3 中，组件通信是指组件之间的数据交换和事件传递。组件通信是 Vue 应用程序中非常重要的一部分，它使得不同的组件能够协同工作，实现复杂的业务逻辑。本文将总结 Vue3 中的七种组件通信方式，帮助开发者更好...
vue面试题-vue常见面试题和答案
03-13
Vue是一款流行的前端框架，以下是常见的Vue面试题和答案： 1. Vue的优点？ 答：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据、结构分离、虚拟DOM、运行速度更快。 2. Vue父组件向子组件传递数据？ 答...
【JavaScript源代码】详解vue组件之间相互传值的方式.docx
12-30
通过一个空 vue 实例四、多层父子组件通信总结　概述　一、父组件向子组件传值　二、子组件向父组件传值　1.子组件绑定一个事件，通过 this.$emit() 来触发2.通过 callback 函数3. 通过 $parent / $childre
vue2.0嵌套组件之间的通信（$refs，props，$emit）
weixin_33813128的博客
03-13 783
vue的一大特色就是组件化，所以组件之间的数据交互是非常重要，而我们经常使用组件之间的通信的方法有：props,$refs和emit。 初识组件之间的通信的属性和方法 props的使用 子组件使用父组件的数据，使用vue的属性props。 当我们在父组件parent里面嵌套一个子组件son的时候，如果我们需要使用父组件的数据的时候，我们可以在子组件标签上面绑定一个属性，然后在子组件里面通过...
vue传值（先介绍props refs parent）
weixin_43675173的博客
11-19 300
vue中父组件像子组件传值：* *用props，如下： 父组件中： <template> <div> <firstchildren :Msg="msg"></firstchildren> </div> </template> <script> import firstchi...
vue 父子传值 ref和props两种方法
weixin_48854245的博客
10-09 719
关于vue父子传值的ref和props和emit三种方法
非父子组件间的通信 组件生命周期 $refs的使用 动态组件
聪明勇敢有力气的博客
10-24 393
非父子组件间的通信 组件生命周期 $refs的使用 动态组件
vue3 组件中props,emits用法
热门推荐
wuxing164的博客
11-11 2万+
组件 <template> <teleport to="#mymodel"> <div id="center" v-if="isShow"> <h2><slot>my model</slot></h2> <button @click="btnclose">close</button> </div&gt...
子组件emit有参数，父组件也有参数，子组件用emit传递参数的同时，父组件也传递参数
weixin_43239880的博客
10-19 1225
子组件emit有参数，父组件也有参数 子组件emit有参数，父组件也有参数，子组件用emit传递参数的同时，父组件也传递参数
vuejs 的watch 和 $emit
masterShaw的博客
07-25 6226
vue有很多像watch，prop，emit等这种api，自己看官网 现在给出两个简单的例子： watch 有两种，一种是深度监听，一种是浅度监听 watch 类型: { [key: string]: string | Function | Object } 详细: 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
2021/10/09 北京 vue父子组件通信--- 自定义事件 this.$emit（）
m0_56799642的博客
10-09 271
第一件要明白的是自定义事件是给组件使用的，考虑一下怎么触发我们自己定义的事件？ 由于是给student组件绑定了自定义事件，要触发就找student组件。事件触发后会调用methods里的demo()方法. 那么来看看我们的student组件是如何触发父组件里我们自定义的事件的。一行代码: this.$emit() 在模板template里，定义一个按钮，方法里调用this.$emit() 子组件给父组件传递数据的俩种方式，props和自定义事件。在触发事件getStu...
Vue Props是什么
PanDa____的博客
02-23 3108
props相当于一个组建的输入，和JS中function(a,b){}中的a和b很像，是一种参数 如图展示 const foo={ props:['title'], template:'<div>局部组件{{title}}</div>', }; const a=new Vue({ el:'#app', components:{foo}, template:'&l
vue $refs $emit prop
08-17
Vue中的$refs、$emit和prop是Vue框架中的关键概念。 $refs是Vue组件实例的一个属性，它允许你直接访问组件内部的子元素或子组件。你可以给子元素或子组件设置ref属性，然后通过this.$refs来访问它们。例如，你可以在父组件中使用$refs来调用子组件的方法或访问子元素的属性。 $emit是Vue组件实例上的一个方法，用于触发自定义事件。你可以在子组件中使用$emit来触发一个自定义事件，并在父组件中通过v-on来监听这个事件并执行相应的逻辑。 prop是Vue组件中父组件向子组件传递数据的一种方式。父组件通过在子组件上绑定属性的方式将数据传递给子组件，并在子组件中使用props选项来声明接收这些数据的属性。子组件可以通过props属性来接收和使用父组件传递的数据。 总结一下： - $refs用于访问组件内部的子元素或子组件。 - $emit用于触发自定义事件。 - prop用于父组件向子组件传递数据。 希望这能帮到你！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值