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>

效果如下:
vue中子父组件传值使用$emit,$on,$off

$on监听事件

监听当前实例上的自定义事件。事件可以由vm.e m i t 触 发 。 回 调 函 数 会 接 收 所 有 传 入 事 件 触 发 函 数 的 额 外 参 数 。 注 意 : 使 用 ‘ emit触发。回调函数会接收所有传入事件触发函数的额外参数。 注意:使用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>

上一篇:面向对象第一天


下一篇:MySQL修改某一列的前几个字符