一个很简单的pros实例,用来演示父组件子组件传值
1.父组件怎么向子组件传值
这里一共有两种方法
- 第一种,静态传递---------props(着重于数据的传递)
首先我们假设我们有一个组件叫HelloWorld ,在父组件上这么写,直接name=""这样子传过去
(ref="hello"是挂载的意思)
<HelloWorld ref="hello" name="阿虎" :age="18" :num="16"></HelloWorld>
在子组件用props接收传过来的参数。接收一般有三种方式,但是为了简单,我们一般用第一种方式就可以了,一般接收完后就可以在代码方面直接调用了
//这个常用,一般写这个,因为比较简单嘛
props:['name','age','num'],
//接收的同时对数据进行类型限制
// props:{
// name:String,//限制这种类型不然不给过。
// age:Number,
// num:Number
// },
// //加强版
// props:{
// name:{
// type:String,
// required:true,
// default:"你好"
// }
// },
接下来就可以直接引用了,代码里直接{{this.name}}就可以输出来了。
但是你也可以通过这种方式绑定数据到data里面。
data(){
return {
MyNum:this.num
}
},
那子组件获取了父组件的数据,父组件怎么获取子组件的参数呢
- 第二种 通过$ref 实现通信
对于ref官方的解释是:ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。
看不懂对吧?很正常,我也看不懂。那应该怎么理解?看看我的解释:
如果ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过 $ref可能获取到在子组件里定义的属性和方法。
如果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('我是子组件一!')
}
}
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
data(){
return{
message:''
}
},
methods:{
getMessage(m){
this.message=m;
}
}
}
</script>
</script>
方法一 把函数传到组件中去
组件可以接收数据,函数也是数据,所以也能传到组件里面去
新建一个school组件,将getschoolname传到子组件中去
<school :getschoolname="getschoolname">常规方法pros获取子组件的内容</school>
在父组件的函数方法
getschoolname(name){
console.log("收到名字了"+name)
this.name=name;//父组件的name接收子组件传过来的name
},
同时在子组件获取传进来的函数
props:["getschoolname"],
点击事件方法,点击就可以传数据过去了
methods:{
sendschoolname(){
this.getschoolname(this.name);
//看这里,接收的getschoolname函数直接在这里调用,this.name就是子组件的数据,
//将name传到父组件里面去
}
},
方法二,emit法,通过直接在vc实例对象里面自定义事件获取参数的方法获取数据
全部步骤就这么几个
1.父组件定义一个函数接收数据
demo(data){
console.log("demo调用了",data);
},
2.在子组件的类型里面自定义一个事件,将第一步定义的函数插进去
<student @bindvc="demo">自定义事件获取子组件内容(给实例组件vc绑定了一个事件)</student>
3.子组件$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。
sendstudentname(){
//触发了stundent组件实例对象上的bindvc对象
this.$emit('bindvc',this.myname)//触发当前实例上的事件。附加参数myname都会传给监听器回调。
},
成功获取
方法三:通过直接在vc实例对象里面自定义事件获取参数的方法获取数据
我们都知道,ref方法可以获取子组件的实例对象的dom结构,也就是说,我们不需要用pros传一个函数进去也能获取子组件的数据(通过在对象中获取即可),这个跟上面的其实理论上也是同一种方法。
三步走
1.父组件定义一个函数接收数据
demo(data){
console.log("demo调用了",data);
},
2.给父组件的子组件实例加上ref="",通过这种方式获取子组件实例
<student ref="student" >自定义事件</student>
3.在父组件挂载方法里面的vc实例上面直接加上’bindvc’这个自定义事件(这个就跟第二种方法一样)
mounted(){
console.log(this.$refs.student)
this.$refs.student.$on('bindvc',this.demo)//这个demo就是第一步的demo,拿他当回调函数
//亲手拿到student的实例对象,然后$on方法当bindvc调用的时候执行demo回调方法
//Vue中的$on是一种将函数与事件绑定的方法。当'bindvc'在子组件执行的时候,执行回调函数demo
}
4.子组件$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。
sendstudentname(){
//触发了stundent组件实例对象上的bindvc对象
this.$emit('bindvc',this.myname)//触发当前实例上的事件。附加参数myname都会传给监听器回调。
},
最后一个知识点,解绑事件
this.$off('bindvc')//只是适用于解绑一个事件
this.$off(['bindvc','otherbind'])//解绑多个事件