Vue教程 第二篇 组件详解

上一篇我们讲了组件的构成，同时也提到了组件的嵌套和传参；另外我们还遗留了组件生命周期的概念，这两个问题我们现在来详解一下（实例为主 上代码）：

组件生命周期

<template>
 <div class="app-container">
   测试组件生命周期
 </div>
</template>

<script type="text/ecmascript-6">
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完成')
  }
}
</script>

<style scoped>

</style>

大家把这个代码拷过去执行一下 看一下console控制台就一目了然了 如果你懂浏览器渲染页面的原理 那就ok了 

这里可以补充一下 另外两个钩子函数 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
 */
<template>
 <div class="app-container">
   <h1>我是父组件</h1>
   <p>我说：<input type="text" v-model="message"></p>
    <p>我听见儿子说：{{messageChild}}</p>

    <p>总数：{{count}}</p>

   <v-child :messageParent="message" v-model="messageChild"></v-child>

   <child-count @increase="handle" @reduce="handle"></child-count>
 </div>
</template>

<script type="text/ecmascript-6">
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 () {

  }
}
</script>

<style scoped>

</style>

<template>
 <div class="app-container" :style="styls">
   <h2>我是子组件</h2>
   <p>我说：<input type="text" v-model="message" @change="change"></p>
   <p>我听见爸爸说：{{messageParent}}</p>
 </div>
</template>

<script type="text/ecmascript-6">
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 () {

  }
}
</script>

<style scoped>

</style>

<template>
 <div class="app-container">
   <button @click="handleIncrease">+</button>
   <button @click="handleReduce">-</button>
 </div>
</template>

<script type="text/ecmascript-6">
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 () {

  }
}
</script>

<style scoped>

</style>

兄弟组件相互通信

先引入eventBus事件总线 然后我们来模拟男女朋友打电话（模拟同级组件通信）

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

<template>
 <div class="app-container">
   <h3>男朋友</h3>
   <p>你说：<input type="text" v-model="message"></p>
   <p>你女朋友跟你说：{{text}}</p>
   <button @click="ge">打电话</button>
 </div>
</template>

<script type="text/ecmascript-6">
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 () {

  }
}
</script>

<style scoped>

</style>

<template>
 <div class="app-container" :style="styls">
   <h3>女朋友</h3>
   <p>你说：<input type="text" v-model="message"></p>
   <p>你男朋友跟你说：{{text}}</p>
   <button @click="ge">回电话</button>
 </div>
</template>

<script type="text/ecmascript-6">
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 () {

  }
}
</script>

<style scoped>

</style>

已经掌握神技的你 赶紧复制代码 操作起来吧 试试效果吧