[Vue] FAQ¶

VueのFAQ

`scoped`スタイルの子コンポーネントを指定したい¶

XXXComponent内にinnerクラスが存在するけど、scoped属性でスタイル指定したい場合に...

<template>
  <XXXComponent />
</template>
<style scoped>
>>> .inner {
  width: 18px;
}
</style>

スコープ付き CSS · vue-loader

`v-model`で指定したプロパティが同期しない¶

`:v-model="hoge"`のように`v-bind`形式になっている¶

v-ifやv-forと同様、v-modelに:の前置は不要.

`v-model="_hoge"`のようにアンダースコアで始まった名前になっている¶

アンダースコアから始まるプロパティはVueで正しく動作しない. (プロキシされない)

API — Vue.js

変更があってもcomputed propertyが再計算されない¶

computedの式で参照しているプロパティが初期化されているかを確認する。
undefinedの代入もNG。

NGの例

const hoge: string | null;
const hoge: string | undefined = undefined;

OKの例

const hoge: string | null = "";
const hoge: string | null = null;

v-modelを指定するコンポーネントを作りたい¶

以下を参照。Vue3になったら変わる。

jp.vuejs.org

コンポーネントの基本 — Vue.js

Vue.js - The Progressive JavaScript Framework

プロパティにvalueを指定
値に変更があったらinputイベントをemitしてvalueを送出する

watchしたプロパティに変更があっても処理が実行されない¶

配列やオブジェクトの内部変更を検知するには{ deep: true }が必要。
computedでは不要なので間違えやすい。

パーツがクリックされたら表示されるダイアログコンポーネントを作りたい¶

最小構成で以下のような感じ。
<slot></slot>の部分にトリガーとなるパーツを外側から指定する。

<template>
  <div>
    <v-dialog v-model="state.visible">
      <template v-slot:activator="{ on, attrs }">
        <div v-bind="attrs" v-on="on">
          <slot></slot>
        </div>
      </template>
      <div>なかみ</div>
    </v-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "@vue/composition-api";

export default defineComponent({
  setup(props) {
    const state = reactive({
      visible: false,
    });

    return {
      state,
    };
  },
});
</script>

呼び出し側。

<your-dialog>
    <button>トリガーとなるパーツ</button>
<your-dialog>

クリック判定を親に伝播させたくない¶

@click.stopを使う。

<div @click.stop="onClick">hoge</div>

通常はevent.stopPropagation()を使うが、Vueではイベント修飾子という特殊な構文がある。