vue的组件子组件父组件传值简单实例和详解 pros $emit和$refs,解绑事件

一个很简单的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'])//解绑多个事件