componentタグを使用する。 <component is="script" src="./hoge.js" async></component>

概要 deep selector を使用する。 方法 vue2の場合 ::v-deep の他に、 >>> または /deep/ を指定する方法があるが、バージョンによってはエラーになったり、解釈されなかったりする。 .parent-some-class ::v-deep .child-some-class { margin-top: 30px; } …

方法 .native 修飾子を使用する。 <templete> <div> <some-component @click.native="onClick" /> </div> </templete> 用途 ライブラリのコンポーネントを使用している場合に、そのコンポーネントで発生するclickイベント等のネイティブイベントを、そのコンポーネントを利用する側で購読したい場合。 自作のコンポーネントを使用してい…

$watchで、子コンポーネントのdataを追跡するようにする。 { mounted() { this.$watch( () => this.$refs.someComponent.someData, (val) => { console.log(`someData updated: val: ${val}`); }, ); }, }

templateをあえて使用する。 条件分で1つの条件分岐のみに<template>タグを使用している場合などでは、あえて全ての条件分岐に<template>タグを使用する。 そうすることで、インデントの抽象度を統一され、より理解し易いコードになる。 <button v-if="isA" @click="onClickA">A</button> <template v-else> <button @click="onClickB">B</button> <button @click="onClickC">C</button> </template> </template></template>

deepプロパティにtrueを指定する。 export default { watch: { hoge: { deep: true, handler(val) { console.log('watch hoge'); } } } };

オブジェクト名.プロパティ名 を指定する。 export default { watch: { `hoge.fuga`(val) { console.log('watch hoge.fuga'); } }, };

immediateプロパティにtrueを指定する。 export default { watch: { hoge: { immediate: true, handler(val) { console.log('watch hoge'); }, } } };

コード const ja = { test: 'テスト', entry: '申込受付中です。{newline}詳しくは{here}。', here: 'こちら' }; <i18n path="entry" tag="p"> <template #newline> <br /> </template> <template #here> <a href="/hoge">{{ $t('here') }}</a> </template> </i18n> 出力結果 <p>申込受付中です。<br />詳しくは<a href="/hoge">こちら</a>。 tagに指定したタグが使用される。 コード co…</p>