コンポーネントを使用する

オンラインスキルアップのサンプルコード

by wintyo

HTML

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<script src="https://unpkg.com/vue-types"></script>

JavaScript

const MyComponent = {
  props: {
    text: VueTypes.string.isRequired,  // $props.textは文字列型で必ず受け取る
    value: VueTypes.number.isRequired  // $props.valueは数値型で必ず受け取る
  },
  template: `
    <div>
      <div>propsで受け取ったデータ</div>
      <div>text: {{ $props.text }}</div>
      <div>value: {{ $props.value }}</div>
    </div>
  `
};

new Vue({
  el: '#app',
  components: {
    MyComponent
  },
  data() {
    return {
      value: 10
    };
  },
  template: `
    <div>
      <!-- textはただの文字列なのでHTML属性と同じように書いて渡す -->
      <!-- valueは数値でVue.jsのデータを渡したいので、先頭に:をつけて渡す -->
      <MyComponent
        text="テキスト"
        :value="$data.value"
      />
    </div>
  `
});