前端 refs通信

最新推荐文章于 2024-05-11 21:30:51 发布

卡卡西Sensei

最新推荐文章于 2024-05-11 21:30:51 发布

阅读量1.6k

点赞数 2

分类专栏： web前端文章标签： refs 组件通信ref

本文链接：https://blog.csdn.net/zjpjay/article/details/113308788

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.ref 放在标签上

2.ref放在组件上

3.总结：

组件之间的的通信，除了props, 事件总线，事件机制( $on(eventName),$emit(eventName) )，还有Ref

例如，一个输入框input，我们要拿到它的值，有几种方法呢？

最简单的就是v-model，数据双向绑定，这里就不具体展开说了，着重讲一讲ref,那么这个ref该怎么使用呢？

1.ref 放在标签上

<div id="app">
			<input  type="text" ref="inputText"/>
			<button @click="handle()">按钮</button>			
</div>

var vm = new Vue({
				el:'#app',
				methods:{
					handle(){
						console.log(this.$refs)
					}
					
				}
			});

看看打印的$refs,其实就是拿到inpu这个dom节点了，那么拿到它的值，应该也很简单了，ref="inputText" 其实就是做了个标记，我们可以直接拿到它所标记的标签的dom节点

.value就可以拿到值了

handle(){
console.log(this.$refs.inputText.value)
}

2.ref放在组件上

<body>
		<div id="app">
			<input  type="text" ref="inputText"/>
			<button @click="handle()">按钮</button>	
			<my-child ref="childComponent"></my-child>
		</div>
		<script type="text/javascript">
			//子组件
			Vue.component('my-child',{
				template:`
				<div> 
					child组件
				</div>
				`,
				methods:{
					childHandle(value){
						console.log(value)
					}
				}
			})
		
			var vm = new Vue({
				el:'#app',
				methods:{
					handle(){
						// console.log(this.$refs.inputText.value)
						console.log(this.$refs)
					}
					
				}
			});
		</script>
	</body>

看打印出来的，里面有两个，都是ref标记了的，一个是标签，一个是我们的子组件,那么现在我们要拿子组件里面的值，或者把值传给子组件该怎么操作呢？

1.拿子组件中的值

<script type="text/javascript">
			//子组件
			Vue.component('my-child',{
				template:`
				<div> 
					child组件
				</div>
				`,
				data(){
					return {
						title:'我是子组件'
					}
				},
				methods:{
					childHandle(value){
						console.log(value)
					}
				}
			})
		
			var vm = new Vue({
				el:'#app',
				methods:{
					handle(){
						// console.log(this.$refs.inputText.value)
						console.log(this.$refs.childComponent.title)
					}
					
				}
			});
		</script>

2.传值给子组件

这就是通过ref实现组件间的通信，是不是很简单啊！

3.总结

ref放在标签上，拿到的是原生节点
ref放在组件上，拿到的是组件对象，组件的所有属性，和方法都可以拿到，那么父组件可以拿到子组件的属性，和方法，都不需要子传父了。

卡卡西Sensei

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端 refs通信

目录1.ref 放在标签上2.ref放在组件上3.总结：组件之间的的通信，除了props, 事件总线，事件机制( $on(eventName),$emit(eventName) )，还有Ref例如，一个输入框input，我们要拿到它的值，有几种方法呢？最简单的就是v-model，数据双向绑定，这里就不具体展开说了，着重讲一讲ref,那么这个ref该怎么使用呢？1.ref 放在标签上<div id="app"> <input type="te...
复制链接

扫一扫