Vue子组件监听父组件的事件

正常情况下,父组件可以监听子组件传递过来的事件,那么子组件怎么监听父组件的事件呢?

实际案例:

假设子组件是一个弹框表单,子组件里边我预留了一个按钮位置,用于【添加数据】或者【编辑数据】按钮,点击按钮,子组件显示弹框。

示例一:整个组件监听事件

<template>
  <div @click="changeVisiable">
    <slot></slot>
    <div v-show="visiable">显示隐藏的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visiable: false,
    };
  },

  methods: {
    changeVisiable() {
      this.visiable = !this.visiable;
    },
  },
};
</script>

父组件

<template>
  <div id="app">
    <Child>
      <button>打开</button>
    </Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "app",

  data() {
    return {};
  },

  components: { Child },
};
</script>

此时也可以实现父组件中点击按钮,子组件触发相应的事件,此时,整个div标签都会接受到点击事件,范围扩大了

Vue子组件监听父组件的事件

示例二:使用插槽事件

子组件

<template>
  <div>
    <slot></slot>
    <div v-show="visiable">显示隐藏的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visiable: false,
      reference: null,
    };
  },

  methods: {
    changeVisiable() {
      this.visiable = !this.visiable;
    },
  },

  mounted() {
    if (this.$slots.default) {
      this.reference = this.$slots.default[0].elm;
    }
    if (this.reference) {
      this.reference.addEventListener("click", this.changeVisiable, false);
    }
  },

  beforeDestroy() {
    if (this.reference) {
      this.reference.removeEventListener("click", this.changeVisiable, false);
    }
  },
};
</script>

父组件

<template>
  <div id="app">
    <Child>
      <button>打开</button>
    </Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "app",

  data() {
    return {};
  },

  components: { Child },
};
</script>

当父组件中的按钮被点击,子组件的隐藏内容将会被显示Vue子组件监听父组件的事件

此方法发现这个组件写的代码量变大了

方式三:监听参数变化

<template>
  <div>
    <slot></slot>
    <div v-show="visiable">显示隐藏的内容</div>
  </div>
</template>

<script>
export default {
  props: {
    visiable: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

父组件

<template>
  <div id="app">
    <Child :visiable="visiable">
      <button @click="handleClick">打开</button>
    </Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "app",

  data() {
    return {
      visiable: false,
    };
  },

  components: { Child },

  methods: {
    handleClick() {
      this.visiable = !this.visiable;
    },
  },
};
</script>

此例通过父组件传递的参数控制子组件的内容显示,通过参数来实现组件通信,如果 标签的内容变化可预期,可以使用一个参数来控制是添加,还是编辑,来显示不一样的按钮形式。

参考

[ Vue ] 给 slot 插槽绑定事件

上一篇:【vue】指令修饰符,键盘事件,阻止默认事件,阻止事件传播


下一篇:Vue.js 事件处理器 v-on