vue中$refs、$emit、$on的使用场景

1、$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()
    
  • 子组件 childa
    发送方使用 $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>
    
  • 子组件 childb
    而接收方通过 $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>
    
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值