vue--父子组件间通信实例讲解props、$ref、$emit
先说结论
prop和$ref都是父组件向子组件通信
prop:
着重于数据的传递,它并不能调用子组件里的属性和方法。
像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。
$ref:
着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。
而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。
$emit是子组件向父组件通信
分别举例
在vue项目中,经常需用用到组件,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。首先要有两个文件,一个是父组件如father.vue和子组件child.vue。
props
<!-- 父组件 -->
<template>
<div>
<h1>父组件</h1>
<child message="子组件"></child> //通过自定义属性向子组件传递数据
</div>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
}
</script>
<!-- 子组件 -->
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
props: ['message'] //好了,这个时候message就是上面父组件传来的信息 -“子组件”
}
</script>
//这个是传数据用的,静态数据传值,动态数据传表达式,道理都一样的哈(不是方法哟!!)
$ref
- 如果ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过ref可能获取到在子组件里定义的属性和方法。
- 如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,通过$ref可能获取到该DOM 的属性集合,轻松访问到DOM元素,作用与JQ选择器、extjs中reference类似。
用$ref实现上面props的实现的功能
<template>
<div>
<h1>父组件</h1>
<child ref="msg"></child>
</div>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
mounted: function () {
this.$refs.msg.getMessage('子组件!')
}
}
</script>
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
data(){
return{
message:''
}
},
methods:{
getMessage(m){
this.message=m;
}
}
}
</script>
从上面的代码我们可以发现,通过ref=‘msg’可以将子组件child的实例指给$ref,并且通过.msg.getMessage()调用到子组件的getMessage方法,将参数传递给子组件。
$emit
$emit 实现子组件向父组件通信
<template>
<div>
<h1>{{title}}</h1>
<child @getMessage="showMsg"></child>
</div>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
data(){
return{
title:''
}
},
methods:{
showMsg(title){
this.title=title;
}
}
}
</script>
<template>
<h3>子组件</h3>
</template>
<script>
export default {
mounted: function () {
//第一个是方法,后面的就是参数
this.$emit('getMessage', '父组件!')
}
}
</script>
转载请说明出处,谢谢