Vue — expose (expose)

آخرین بروزرسانی: 1404/08/21

قبلی: emits (emits) بعدی: هوک های چرخه عمر (Lifecycle Hooks)

expose (expose)

«گزینه expose ویو» مشخص می کند کدام بخش های فرزند، برای والد باز باشد. یعنی مثل درِ آزمایشگاه که فقط ابزارهای مجاز بیرون باشند.

تعریف و کاربرد expose

گزینه expose لیست ویژگی ها یا متدهای قابل دسترسی از طریق template refs را تعیین می کند. اگر expose نباشد، پیش فرض همه چیز در دسترس والد است.

پس، با expose می توانی سطح دسترسی را محدود کنی. این کار ایمن تر و قابل پیش بینی تر است.

نمونه ساده: در دسترس گذاشتن یک متد

export default {
  expose: [
    'createMessage'
  ],
  data() {
    return {
      message: ''
    };
  },
  methods: {
    createMessage(msg) {
      this.message += msg + ' ';
    }
  }
};

مشاهده در ادیتور

کنترل دسترسی با expose

وقتی expose تعریف شود، فقط همان اقلام برای والد قابل دسترسی اند. بقیه پشت صحنه می مانند.

مثال: فقط داده message را بده بیرون

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>Message from parent:</p>
    <p id="pEl">{{ message }}</p>
  </div>
</template>

<script>
export default {
  expose: [
    'message'
  ],
  data() {
    return {
      message: ''
    };
  },
  methods: {
    createMessage(msg) {
      this.message += msg + ' ';
    }
  }
};
<\/script>

<style scoped>
#pEl {
  background-color: lightgreen;
}
</style>

مشاهده در ادیتور