【Vue】バインディングについてのメモ

データバインディング

データを更新した時、その更新をDOMに反映する仕組みのことです。
また、データバインディングには種類があります。

単方向バインディング

親→子

親が更新されたら子、子が更新されたら親のように一方方向に更新されます。
propsを利用して値を渡せます。

ちなみに、親は呼び出し元のファイルで、子は呼ばれた側のファイルです。

parent.vue

<template>
   <div>
　　　　　　　　<!-- 子に送るもの「:msg」>
    <Child :message="msg"></Child>
   </div>
</template>

<script>
import child from './component/child.vue'
export default {
  data() {
    return {
      msg: 'World'
    }
  },
  components: {
    Child: child,
  },
}
</script>

child.vue

<template>
  <div>
    <p>Hello,{{ message }}</p>
  </div>
</template>

<script>
export default {
  //親から受け取ったものは「props」で受け取る
  props: ['message']
}
</script>

【出力】
Hello,Wold

子→親

$emitで子から親にイベントを渡すことができます。

parent.vue

<template>
  <div>
    <p>text: {{ parent_text }}</p>
    <Child @child-click='parent_text = $event'/>
  </div>
</template>

<script>
import child2 from './component/child2.vue'
export default {
  data: function() {
    return {
      parent_text: '親コンポーネントのテキスト'
    }
  },
  components: {
    Child: child2
  }
}
</script>

child.vue

<template>
  <div>
    <button @click='sendParent'>値を渡す</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      child_text: '子コンポーネントのテキスト'
    };
  },
  methods: {
    sendParent() {
      // $emit('イベント名',渡したい値)
      this.$emit("child-click", this.child_text);
    }
  }
};
</script>

【出力】
子コンポーネントのテキスト

双方向バインディング

データオブジェクトの値を動的に変化させたい場合は双方向にバインディングさせてあげます。
スクリプトとブラウザのどちらからでも自動反映されます。
双方向バインディングにはv-modelディレクティブを使用します。

<template>
   <div>
      入力：{{ data }}
      <input v-model="data">
   </div>
</template>

<script>
export default {
  data() {
    return {
      data:'',
    }
  }
}
</script>

ブラウザからの入力がリアルタイムで反映されます。

属性のバインディング

HTMLタグの属性にも値をバインディングできます。
v-bindディレクティブを使用します。

属性の名前や真偽値で

idの名前を渡す

<template>
  <div>
    <div v-bind:id="dynamicId">text</div>
  </div>
</template>

<script>
export default {
  data() {
    return{
      dynamicId: "textId"
    }
  }
}
</script>

真偽値で出し分ける

<template>
  <div>
    <div v-bind:class="{ active: isActive }">text2</div>
  </div>
</template>

<script>
export default {
  data() {
    return{
      isActive: true
    }
  }
}
</script>

HTMLのバインディング

v-htmlディレクティブでHTMLを渡す事ができます。
Mustache構文({{ }}二重括弧)でもデータを描画できますが、テキストとして扱われます。
v-htmlはhtmlとして描画できます。

<template>
  <div>
    Using mustaches:
    <p>{{ rawHtml }}</p>
    Using v-html directive:
    <p v-html="rawHtml"></p>
  </div>
</template>

<script>
export default {
  data() {
    return{
      rawHtml:'<span>テキストです</span>'
    }
  }
}
</script>

以下のように表示されます。
Mustache構文を使用した方は文字列、v-htmlを使用した方はHtmlとなります。

【出力】