vue中的父子组件之间的数据传递之props、$ref和$emit
之前大部分时候都是在用angular开发项目,vue用的很少,不过现在也逐渐在用vue开发一些项目了,于是就想着把vue熟悉并总结一下。vue的组件化思想,其中组件之间数据的传递很重要,我感觉很有必要把它总结一下。好了,开始正题:props是用于数据之间的传递(父组件向子组件),ref也可以用于数据之间的传递(ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过ref可能获取到..
之前大部分时候都是在用angular开发项目,vue用的很少,不过现在也逐渐在用vue开发一些项目了,于是就想着把vue熟悉并总结一下。
vue的组件化思想,其中组件之间数据的传递很重要,我感觉很有必要把它总结一下。好了,开始正题:
props是用于数据之间的传递(父组件向子组件),ref也可以用于数据之间的传递(ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过ref可能获取到在子组件里定义的属性和方法。),$emit是用于事件之间的传递(子组件触发父组件里面的方法)。
1.props是用于父组件向子组件传递数据信息(props是单向绑定的,即只能父组件向子组件传递,不能反向。)
例如(借鉴了别人写的例子):
<!-- 父组件 -->
<template>
<div>
<h1>我是父组件!</h1>
<child message="我是子组件一!"></child>
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<child v-bind:message="a+b"></child>
<!-- 用一个变量进行动态赋值。-->
<child v-bind:message="msg"></child>
</div>
</template>
<script>
import child from '../components/child.vue'
export default {
components: {child},
data() {
return {
a:'我是子组件二!',
b:112233,
msg: '我是子组件三!'+ Math.random()
}
}
}
</script>
<!-- 子组件 -->
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
props: ['message']
}
</script>
视图效果如下:
可以看到子组件中用props来接受从父组件传过来的message的数据信息。从父组件传递过来的数据没有限制,可以是字符串,表达式,对象等。
其中父组件中的components: {child},需要特别注意一下,这是借鉴了es6中的内容,完整的写法应该是:components: {child:child},这里child就作为标签名了,如果import child from '…/components/child.vue’中的child写成Child,那么components: {child:Child},这里标签名还是child,当然也可以直接写为components: {Child},这时候标签名就变成了Child了。
2.通过ref 实现通信
对于ref官方的解释是:ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 refs 对象上。
那应该怎么理解?看看下面的解释:
1.如果ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过ref可能获取到在子组件里定义的属性和方法。
2.如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,通过$ref可能获取到该DOM 的属性集合,轻松访问到DOM元素,作用与JQ选择器类似。
那如何通过ref 实现通信?下面就将上面prop实现的功能,用ref实现一遍:
<!-- 父组件 -->
<template>
<div>
<h1>我是父组件!</h1>
<child ref="msg"></child>
</div>
</template>
<script>
import child from '../components/child.vue'
export default {
components: {child},
mounted: function () {
console.log( this.$refs.msg);
this.$refs.msg.getMessage('我是子组件一!')
}
}
</script>
<!-- 子组件 -->
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
data(){
return{
message:''
}
},
methods:{
getMessage(m){
this.message=m;
}
}
}
</script>
效果图如下:
下面再看一下ref是如何获取dom元素的
代码如下:
<template>
<div id="app">
<div ref="testDom">11111</div>
<button @click="getTest">获取test节点</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
console.log(this.$refs.testDom)
}
}
};
</script>
打印出来的元素如下:
这里再补充一点就是,prop和$ref之间的区别:
1.prop 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。
2.ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。
3.通过emit 实现通信
上面两种示例主要都是父组件向子组件通信,而通过
e
m
i
t
实
现
子
组
件
向
父
组
件
通
信
。
对
于
emit 实现子组件向父组件通信。 对于
emit实现子组件向父组件通信。对于emit官网上也是解释得很朦胧,也可以这样理解:
vm.$emit( event, arg )
$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。
<!-- 父组件 -->
<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>
<button @click=“submit”>点击</button>
</template>
<script>
export default {
methods:{
submit(){
this.$emit('getMessage', '我是父组件!')
}
}
}
</script>
效果图如下:
当然: vm.$emit( event, […arg] ) $emit是可以传递多个参数的
例如:
父组件中
<el-button type="primary" size="mini" @getMessage="showMsg">提交</el-button>
methods:{
showMsg(item1, item2, item3){
this.title=item1;
console.log(item2);
console.log(item3);
}
}
子组件中
submit() {
this.$emit('getMessage', item1, item2, item3)
}
在此非常感谢这篇文章对我的帮助,正是参考了这篇文章,才总结了以上的内容。这篇文章的链接如下:vue之父子组件间通信实例讲解(props、$ref 、 $emit )
更多推荐
所有评论(0)