その他の機能

// 子コンポーネント
const tabContents1 = {
  template: `
  <div class="tabContainer">
    <p>タブコンポーネントのコンテンツ1</p>
  </div>
  `
};
const tabContents2 = {
  template: `
  <div class="tabContainer">
    <p>タブコンポーネントのコンテンツ2</p>
    <label><input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)">{{checked}}</label>
  </div>
  `,
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
};
const tabContents3 = {
  template: `
  <div class="tabContainer">
    <p>タブコンポーネントのコンテンツ3</p>
    <button @click="show = !show">クリック@{{show}}</button>
    <template v-if="show">
      <p>表示がアクティブのときだけ表示する。</p>
    </div>
  </div>
  `,
  data() {
    return {
      show: false
    }
  }
};
---------------------------
// 親テンプレート
<button v-for="tab in tabs" v-bind:key="tab.key" v-bind:class="['tabMenu', { 'is-active': currentTab === tab.key }]" v-on:click="currentTab = tab.key">{{ tab.name }}</button>

<component v-bind:is="tabComponents" v-model="testCheckbox"></component>
---------------------------
// 親コンポーネント
new Vue({
...
  components: {
    'tab-contents1': tabContents1,
    'tab-contents2': tabContents2,
    'tab-contents3': tabContents3,
  },
  data: {
    currentTab: 'contents1',
    tabs: [
      {
        key: 'contents1',
        name: 'タブ1'
      },
      {
        key: 'contents2',
        name: 'タブ2'
      },
      {
        key: 'contents3',
        name: 'タブ3'
      }
    ],
    testCheckbox: false
  },
  computed: {
    tabComponents() {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
...

// Mixinオブジェクト
const myMixin = {
  data(){
    return {
      mixinMsg: '「ミックスインで持つデータ」',
      btnTxt: 'ミックスインのメソッド'
    }
  },
  created: function () {
    console.log('ミックスインのcreated');
  },
  methods: {
    changeMsg: function () {
      this.mixinMsg = 'ミックスインでデータを変更';
    }
  }
}
---------------------------
// 子コンポーネント
Vue.component('mixin-component-01', {
  mixins: [myMixin],
  template: `
    <div class="u-mb1">
      <p>{{mixinMsg}}</p>
      <button @click="changeMsg">{{btnTxt}}</button>
    </div>
  `,
  created: function () {
    console.log('コンポーネントのcreated');
  }
});
Vue.component('mixin-component-02', {
  mixins: [myMixin],
  template: `
    <div class="u-mb1">
      <p>{{addMsg}}</p>
      <button @click="changeMsg">{{btnTxt}}</button>
    </div>
  `,
  data(){
    return {
      compoMsg: 'にコンポーネントでテキストを追加',
      btnTxt: 'コンポーネントのメソッド'
    }
  },
  computed:{
    addMsg() {
      return this.mixinMsg + this.compoMsg;
    },
  },
  methods: {
    changeMsg: function () {
      this.mixinMsg = '「コンポーネントでデータを変更」';
      this.compoMsg = 'コンポーネントのメソッド';
    }
  }
});
---------------------------
// 親テンプレート
<mixin-component-01></mixin-component-01>
<mixin-component-02></mixin-component-02>

// 子コンポーネント
Vue.component('toggle-component', {
  template: `
    <div class="u-mb2" ref="target">
    // 対象の要素に任意の名前でref属性を付与
      <template v-if="isShow">
        <slot></slot>
      </template>
      <button @click="toggleEvent">{{btnTxt}}</button>
    </div>
  `,
  data() {
    return {
      btnTxt: '',
      isShow: false,
      target:''
    }
  },
  mounted: function () {
    this.changeTxt();
    this.target = this.$refs.target;
    // 要素へのアクセスはDOMの生成が完了しているタイミングで行う
  },
  methods: {
    toggleEvent(){
      this.isShow = !this.isShow;
      this.changeTxt();
      this.target.scrollIntoView();
    },
    changeTxt() {
      if (this.isShow) {
        this.btnTxt = 'コードを閉じる';
      } else {
        this.btnTxt = 'コードを見る';
      }
    }
  }
});
---------------------------
// 親テンプレート
<toggle-component>
  <pre v-pre>...省略...</pre>
</toggle-component>