Vue $emit

工程师钰珂技术 2022年11月14日

0 收藏 701 点赞 4,628 浏览 1152 个字

案例演示

需求：点击子组件触发一个事件改变父组件的字体大小。

<div id="app">
  <p :style="{fontSize: fontSize + 'px'}">父组件的字体</p>
  <!-- 子组件模板中定义了一个enlarge-text事件，v-on监听该事件 -->
  <child v-on:enlarge-text="change"></child>
  <!-- v-on可以写成@ -->
  <child @enlarge-text="change"></child>
</div>
<script>
  // 注册子组件
  Vue.component("child", {
    data: function () {
      return {};
    },
    template: `
          <div class="child">
              <button v-on:click="$emit('enlarge-text')">放大父组件字体</button>
              <span>子组件的字体</span>
          </div>
      `,
  });  // 父组件
  let vm = new Vue({
    el: "#app",
    data: function () {
      return {
        fontSize: 15,
      };
    },
    methods: {
      change() {
        this.fontSize++;
      },
    },
  });
</script>

效果演示：

emit的意思是发出、发射。就是我在子组件写的v-on:click="$emit('enlarge-text')"，当我点击按钮之后，$emit会把这个名为enlarge-text的方法发射到父组件层面，然后父组件监听child标签的enlarge-text，也就是<child v-on:enlarge-text="change"></child>，然后实现内部的逻辑。

$emit的第二个参数

使用$emit的第二个参数来决定父组件字体增加的px值为多少：

<div id="app">
  <p :style="{fontSize: + fontSize + 'px'}">父组件的字体</p>
  <!-- 子组件 -->
  <child v-on:enlarge-text="change($event)"></child>
  <child v-on:enlarge-text="change(1)"></child>
</div>

改变子组件template部分：

Vue.component("child", {
    data: function () {
      return {};
    },
    template: `
          <div class="child">
              <button v-on:click="$emit('enlarge-text', 0.5)">放大父组件字体</button>
              <span>子组件的字体</span>
          </div>
      `,
});

效果演示：