vue中子父组件传值使用$emit，$on，$off

子组件可以使用 $emit,让父组件监听到自定义事件 。

vm.$emit( event, arg ); //触发当前实例上的事件,arg是传递给父组件的参数
vm.$on( event, fn );//监听event事件后运行 fn；

vue也实现了观察者模式，提供了订阅消息，发布消息，注销消息等方法
	$on(type, fn)			订阅消息方法
		type:消息名称，	fn:消息回调函数，参数是由$emit方法传递的
	$emit(type, ...args)	发布消息方法
		type:消息名称	...args:从第二个参数开始，表示传递的数据
	$off(type, fn)			注销消息方法
		type:消息名称	fn:消息回调函数
	组件是一个完整独立的个体，因此彼此之间数据不会共享，所以发布消息与订阅消息必须是同一个组件

一、$emit语法

1、this $emit（‘自定义事件名’,要传送的数据）；

2、触发当前实例上的事件，要传递的数据会传给监听器；

实例1：
父子组件中各有一个按钮，可以同时操作city
在子组件中定义一个city变量，点击按钮可以修改city的值

<template>
    <div>
      城市：{{city}}
      <button type="button" @click="myfun('大连')">点击</button>
    </div>
</template>
<script>
export default{
//把变量city暴露到父组件，通过父组件来修改
    props:["city"],
    methods:{
        myfun(x){
        //通过$emit定义一个事件，x表示需要传递的参数
            this.$emit('showCityName',x);
            //如果$emit传递多个参数，如下
            this.$emit("showCityName",x,y,z);
        }
    }
}
</script>

在父组件中：

<template>
  <div>
    <my-ur @showCityName="updateCity" :city="fatherCity"></my-ur>
    <button @click="fatherFun('常州')">父节点点击</button>
  </div>
</template>
<script>
//导入子组件
import u from "@/components/u.vue";
export default {
//注册子组件
  components: {
    "my-ur": u,
  },
  data() {
    return {
      fatherCity: "北京",
    };
  },
  methods: {
    updateCity(d) {
      this.fatherCity = d;
    },
    fatherFun(x) {
      this.fatherCity = x;
    },
  },
};
</script>

效果如下：

$on监听事件

vm.$on( event, callback )

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。注意：使用‘$on监听后，记得使用$off`销毁事件

1、this.$on ( ′ 事 件 名 ′ ,callback )

callback 回调on(‘事件名’,callback)
callback回调emit要传送的数据；

2、监听当前实例上自定义事件；

<template>
  <div>
    城市：{{ city }}
    <button type="button" @click="myfun('大连','武汉')">子组件按钮点击</button>
  </div>
</template>
<script>
export default {
  props: ["city"],
  created() {
    this.$on("showCityName", this.myfun2);
  },
  methods: {
   myfun2(e) {
      console.log(e);
    },
    myfun(x) {
      this.$emit("showCityName", x);
    },
  },
};
</script>

上面的例子，使用$on去监听$emit,当$emit里面的数据变化的时候，就会触发$on中的第二个参数是个函数，上述例子中我放了一个方法，方法里面的e就是$emit里面的参数

$off

移除自定义事件监听器。

• 如果没有提供参数，则移除所有的事件监听器；
• 如果只提供了事件，则移除该事件所有的监听器；
• 如果同时提供了事件与回调，则只移除这个回调的监听器。

实例：

<template>
  <div>
    城市：{{ city }}
    <button type="button" @click="myfun('大连', '武汉')">子组件按钮点击</button>
  </div>
</template>
<script>
export default {
  props: ["city"],
  mounted() {
      this.$on('showCityName',r=>{
          console.log(r);
      })
  },
  methods: {
    myfun(x) {
      this.$emit("showCityName", x);
    },
  },
  destoryed() {
    this.$off("showCityName");
  },
};
</script>