（二）Vue 组件使用

• props 和 $emit
• 组件间通讯 - 自定义事件
• 组件生命周期

props 和 $emit

index.vue

<template>
    <div>
        <Input @add="addHandler"/>
        <List :list="list" @delete="deleteHandler"/>
    div>
template>

<script>
import Input from './Input'
import List from './List'

export default {
       
    components: {
       
        Input,
        List
    },
    data() {
       
        return {
       
            list: [
                {
       
                    id: 'id-1',
                    title: '标题1'
                },
                {
       
                    id: 'id-2',
                    title: '标题2'
                }
            ]
        }
    },
    methods: {
       
        addHandler(title) {
       
            this.list.push({
       
                id: `id-${ Date.now()}`,
                title
            })
        },
        deleteHandler(id) {
       
            this.list = this.list.filter(item => item.id !== id)
        }
    },
    created() {
       
        // eslint-disable-next-line
        console.log('index created')
    },
    mounted() {
       
        // eslint-disable-next-line
        console.log('index mounted')
    },
    beforeUpdate() {
       
        // eslint-disable-next-line
        console.log('index before update')
    },
    updated() {
       
        // eslint-disable-next-line
        console.log('index updated')
    },
}
script>

input.vue

<template>
  <div>
    <input type="text" v-model="title" />
    <button @click="addTitle">addbutton>
  div>
template>

<script>
import event from './event'

export default {
       
  data () {
       
    return {
       
      title: ''
    }
  },
  methods: {
       
    addTitle () {
       
      // 调用父组件的事件 
      this.$emit('add', this.title)

      // 调用自定义事件 兄弟通信
      event.$emit('onAddTitle', this.title)

      this.title = ''
    }
  }
}
script>

event.js

import Vue from 'vue'

export default new Vue()

list.vue

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {
    {item.title}}

        <button @click="deleteItem(item.id)">删除button>
      li>
    ul>
  div>
template>

<script>
import event from './event'

export default {
       
  // props: ['list']
  props: {
       
    // prop 类型和默认值
    list: {
       
      type: Array,
      default () {
       
        return []
      }
    }
  },
  data () {
       
    return {
       

    }
  },
  methods: {
       
    deleteItem (id) {
       
      this.$emit('delete', id)
    },
    addTitleHandler (title) {
       
      // eslint-disable-next-line
      console.log('on add title', title)
    }
  },
  created () {
       
    // eslint-disable-next-line
    console.log('list created')
  },
  mounted () {
       
    // eslint-disable-next-line
    console.log('list mounted')

    // 绑定自定义事件  兄弟通信
    event.$on('onAddTitle', this.addTitleHandler)
  },
  beforeUpdate () {
       
    // eslint-disable-next-line
    console.log('list before update')
  },
  updated () {
       
    // eslint-disable-next-line
    console.log('list updated')
  },
  beforeDestroy () {
       
    // 及时销毁，否则可能造成内存泄露
    event.$off('onAddTitle', this.addTitleHandler)
  }
}
script>

生命周期（单个组件）

• 挂载阶段 （beforeCreate、created、beforeMount、mounted）
• 更新阶段 （beforeUpdate、updated）
• 销毁阶段（beforeDestory、destroyed）

mounted 与 created 区别？

mounted 是页面已经渲染完了，created页面没有渲染，但 Vue 实例已经初始化完了

【Vue】说说你对DOM选项el、template、render的理解？

生命周期（父子组件）

先父组件created创建js模型，然后子组件创建js模型。先子组件渲染，后父组件渲染。创建初始化应用的实例是从外到内的，渲染是从内到外（因为只有把子组件渲染完，然后父组件才能渲染完）。初始化实例是从父组件到子组件的，渲染的时候要保证子组件渲染完，父组件才能渲染完。
Vue中父子组件生命周期执行顺序