Vueチュートリアル第2編コンポーネントの詳細

前回はコンポーネントの構成について述べたと同時に、コンポーネントのネストと伝参についても述べた.また、コンポーネントのライフサイクルの概念も残っています.この2つの問題について詳しく説明します(インスタンスはメインコードです).
コンポーネントライフサイクル

export default {
  name: 'life',
  components: {

  },
  data () {
    return {

    }
  },
  computed: {

  },
  watch: {

  },
  methods: {

  },
  beforeCreate () {
    console.log(' ')
  },
  created () {
    console.log(' ')
  },
  beforeMount () {
    console.log(' DOM')
  },
  mounted () {
    console.log(' ')
  },
  beforeUpdate () {
    console.log(' ')
  },
  updated () {
    console.log(' ')
  },
  beforeDestroy () {
    console.log(' destroy')
  },
  destroyed () {
    console.log('destroy ')
  }
}

このコードをコピーしてコンソールを見れば一目瞭然ブラウザでページをレンダリングする原理がわかるならok
ここでは、他の2つのフック関数activatedとdeactivatedがコンポーネントがkeep-aliveメカニズムの下でトリガーされることを補足することができます.ここでは拡張しません.後で話す機会があります.
コンポーネント通信
つまり,コンポーネントパスとは,アプリケーションシーンはもちろんのこと,コンポーネントが多重化されるとパスに関わるはずである.ここでは、親対子コンポーネント通信、子対親コンポーネント通信、兄弟コンポーネント間通信の例についても説明します.
親子通信

/*
 * @Description:
 * @Version:
 * @Company: 
 * @Author: Jesen
 * @Date: 2018-10-30 10:29:12
 * @LastEditors: your name
 * @LastEditTime: 2018-10-30 10:43:01
 */



import child from './child'
import childCount from './childCount'
export default {
  name: 'parent',
  components: {
    'v-child': child,
    'child-count': childCount
  },
  data () {
    return {
      message: ' ， ！（ ）',
      messageChild: '（ ）',
      count: 0
    }
  },
  computed: {

  },
  watch: {

  },
  methods: {
    handle: function (data) {
      this.count = data
    }
  },
  created () {

  },
  mounted () {

  }
}

export default {
  name: 'child',
  components: {

  },
  props: ['messageParent'],
  // props: {
  //   messageParent: String //  ， 
  // },
  // props: {
  //   messageParent: {
  //     type: String,
  //     default: ' '
  //   }
  // },
  data () {
    return {
      styls: {
        color: 'red'
      },
      message: ' ！（ ）'
    }
  },
  computed: {

  },
  watch: {

  },
  methods: {
    change: function () {
      this.$emit('input', this.message)
    }
  },
  created () {

  },
  mounted () {

  }
}

export default {
  name: 'childCount',
  components: {

  },
  data () {
    return {
      counter: 100
    }
  },
  computed: {

  },
  watch: {

  },
  methods: {
    handleIncrease: function () {
      this.counter++
      this.$emit('increase', this.counter)
    },
    handleReduce: function () {
      this.counter--
      this.$emit('reduce', this.counter)
    }
  },
  created () {
    console.log(window)
  },
  mounted () {

  }
}

兄弟コンポーネント相互通信
イベントバスを導入してから、男女の電話をシミュレートします(同級コンポーネント通信をシミュレートします)

import Vue from 'Vue'
/* eslint-disable*/
export default new Vue()

import bus from '../assets/eventBus'
export default {
  name: 'brothera',
  components: {

  },
  data () {
    return {
      message: '',
      text: ''
    }
  },
  computed: {

  },
  watch: {

  },
  methods: {
    ge () {
      bus.$emit('call', this.message) //  
    }
  },
  created () {
    bus.$on('respond', (arg) => {
      this.text = arg //  
    })
  },
  mounted () {

  }
}

import bus from '../assets/eventBus'
export default {
  name: 'brotherb',
  components: {

  },
  data () {
    return {
      styls: {
        color: 'red'
      },
      message: '',
      text: ''
    }
  },
  computed: {

  },
  watch: {

  },
  methods: {
    ge () {
      bus.$emit('respond', this.message) //  
    }
  },
  created () {
    bus.$on('call', (arg) => {
      this.text = arg //  
    })
  },
  mounted () {

  }
}

すでに神技を身につけているあなたは急いで操作して効果を試してみましょう