vue中$refs、$emit、$on、props、$parent的使用场景及方法

1、$emit的使用场景

子组件通过this.$emit方法 调用父组件的事件名并传递数据

子组件：

<template>
  <button @click="emitEvent">点击我</button>
</template>

<script>
  export default {
    data() {
      return {
        msg: "我是子组件中的数据"
      }
    },
    methods: {
      emitEvent(){
        this.$emit('my-event', this.msg)
        //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
      }
    }
  }
</script>

父组件：

<template>
  <div id="app">
    <child-a @my-event="getMyEvent"></child-a>
    <!--父组件中通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值-->
  </div>
</template>

<script>
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    methods: {
      getMyEvent(msg){
          console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
      }
    }
  }
</script>

2、$refs的使用场景

父组件调用子组件的方法，可以传递数据

父组件：

<template>
  <div id="app">
    <child-a ref="child"></child-a>
    <!--用ref给子组件起个名字-->
    <button @click="getMyEvent">点击父组件</button>
  </div>
</template>

<script>
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    data() {
      return {
        msg: "我是父组件中的数据"
      }
    },
    methods: {
      getMyEvent(){
          this.$refs.child.emitEvent(this.msg);
          //调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
      }
    }
  }
</script>

子组件：

<template>
  <button>点击我</button>
</template>

<script>
  export default {
    methods: {
      emitEvent(msg){
         console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
      }
    }
  }
</script>

3、$on的使用场景

兄弟组件之间相互传递数据

• 首先创建一个vue的空白实例（兄弟间的桥梁）

    import Vue from 'vue'
  	export default new Vue()

• 子组件 A
  使用 $emit 自定义事件把数据带过去

<template>
    <div>
        <span>A组件->{{msg}}</span>
        <input type="button" value="把a组件数据传给b" @click ="send">
    </div>
</template>

<script>
import vmson from "../../../util/emptyVue"
export default {
    data(){
       return {
           msg:{
             a:'111',
             b:'222'
           }
       }
    },
    methods:{
      send:function(){
         vmson.$emit("aevent",this.msg)
      }
   }
}
</script>

• 子组件 B
  接收方通过 $on监听自定义事件 — callback接收数据

<template>
 <div>
    <span>B组件,a传的的数据为->{{msg}}</span>
 </div>
</template>

<script>
	  import vmson from "../../../util/emptyVue"
	  export default {
		 data(){
		    return {
		        msg: ""
		    }
		 },
		 mounted() {
		     vmson.$on("aevent",(val)=> {//监听事件aevent，回调函数要使用箭头函数;
		          console.log(val);//打印结果：我是a组件的数据
		          this.msg = val;
		     })
		 }
	}
</script>

• 父组件

<template>
     <div>
      <childa></childa>	
      <br />
      <childb></childb>  	
     </div>
</template>

<script>
   import childa from './childa.vue';
   import childb from './childb.vue';
   export default {
     components:{
    	childa,
   		childb
     },
   	 data(){
   		return {
   			msg:""
   		}
   	 },
   	 methods:{}
   }
</script>

4、父组件向子组件的传递数据

父组件

<template>
  <div class="parent">
    父组件：{{message}}
    <child :my-message="message" mm="123"></child> 
    // 注意传递参数时要用—代替驼峰命名，HTML不区分大小写
    // 通过属性传递 可传递动态属性 也可以传递静态属性 可传递数字、布尔值、数组、对象等任何类型的值
  </div>
</template>

<script>
    import child from '../base/child'
    export default {
        components:{
          child
        }，
        data(){ // 组件的data必须是函数
          return {
            message:'好好学习'
          }
        }
    }
</script>

子组件

<template>
  <div class="child">
    子组件：{{myMessage}}+{{mm}}
  </div>
</template>

<script>
    export default {
        props:['myMessage','mm'],// 方式一
        // 方式二
        // props: {
        //     myMessage: Array  //指定传入的类型，如果类型不对，会警告
        // },
        // // 方式三
        // props: {
        //     myMessage: {
        //         type: Array,
        //         default: [5,6,7]  //指定默认的值
        //     }
        // }
    }
</script>

5.子向父 ($parent)

父组件把方法传入子组件中, 子组件里直接调用这个方法

父组件

<template>
  <div class="parent">
    <child :fatherMethod='fatherMethod'></child>// 父组件把方法传入子组件中，在子组件里直接调用这个方法
  </div>
</template>

<script>
    import child from '../base/child'
    export default {
    	components:{
            child
        },
        methods:{
           fatherMethod() {
              alert('我是父组件的know方法');
           }
        } 
    }
</script>

子组件

<template>
  <div class="child" @click='childClick'>
  </div>
</template>

<script>
    export default {
        // 方式一：
        props:{
           fatherMethod: {
               type: Function,
               default: null
           }
        },
        methods:{
           childClick(){
              this.fatherMethod()
           }
        }
        // 方式二：
        // 或者直接通过 $parent 方法调用父组件方法
        // data() {
        //    return {
        //        msg: '我是子组件传递过来的数据'
        //    }
        // },
        // methods:{
        //   childClick(){
        //       this.$parent.fatherMethod()
        //    }
        // }
    }
</script>

<style scoped>
  .child{
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>