https://element.eleme.io/#/en-US/component/drawer
https://jp.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A3%BE%E5%AD%90
> [!warning]
> [[Vue3]]では`:xxx.sync`は非推奨になったので使わないこと。`v-model:xxx`を使う。
> > [[📕Vue2からVue3へ移行する際の注意ポイント#`xxx.sync`は`v-model xxx`にする]]
以下のように`:visible.sync`を指定できるコンポーネントを作る場合。
```vue
<original-drawer :visible.sync="state.drawer" />
```
内部では`:visible.sync`を受けつけないため、`visible`と`@open`、`@close`を使う場合。
```vue
<template>
<el-drawer
:visible="visible"
@open="emitUpdate(true)"
@close="emitUpdate(false)"
>
<span>hoge</span>
</el-drawer>
</template>
<script lang="ts">
import { defineComponent } from "@vue/composition-api";
export default defineComponent({
props: {
visible: { type: Boolean, required: true },
},
setup(_, { emit }) {
const emitUpdate = (visible: boolean) => {
emit("update:visible", visible);
};
return {
emitUpdate,
};
},
});
</script>
```