• 1. 组件的使用
  • 1.1 父子组件通讯
  • 1.2 兄弟组件通讯
  • 1.3 组件的生命周期

一、基本面试考点

1. 组件的使用

1.1 父子组件通讯

• props 和 $emit

  • props 父 --> 子 传值
  • $emit 子 --> 父 传值

• 注意的点：单向数据流

  • 子组件不可更改父组件传入的值

1.2 兄弟组件通讯

• bus 总线的方式
• vuex 推荐

1.3 组件的生命周期

• 单个组件的生命周期，参看官网

  • 大概分为三个阶段
    • 挂载阶段
    • 更新阶段
    • 销毁阶段
  • 考点
    • created 和 mounted 有什么区别
    • beforeDestroy 的使用场景

• 父子组件的生命周期

  <template>
      <div>
          <Child :list="list"/>
      </div>
  </template>
  
  <script>
  import Child from './Child'
  
  export default {
      components: {
        Child
      },
      data() {
          return {
              list: [
                  {
                      id: 'id-1',
                      title: '标题1'
                  },
                  {
                      id: 'id-2',
                      title: '标题2'
                  }
              ]
          }
      },
      created() {
          console.log('parent created')
      },
      mounted() {
          console.log('parent mounted')
      },
      beforeUpdate() {
          console.log('parent before update')
      },
      updated() {
          console.log('parent updated')
      },
  }
  </script>

  <template>
      <div>
          <ul>
              <li v-for="item in list" :key="item.id">
                  {{item.title}}
              </li>
          </ul>
      </div>
  </template>
  
  <script>
  
  export default {
      // props: ['list']
      props: {
          // prop 类型和默认值
          list: {
              type: Array,
              default() {
                  return []
              }
          }
      },
      created() {
          console.log('child created')
      },
      mounted() {
          console.log('child mounted')
      },
      beforeUpdate() {
          console.log('child before update')
      },
      updated() {
          console.log('child updated')
      }
  }
  </script>

  • 创建打印

    parent created
    child created
    child mounted
    parent mounted

  • 更新数据打印

    parent before update
    child before update
    child updated
    parent updated

  • 结论

    • 创建从父组件到子组件
    • 渲染从子组件到父组件
    • 更新之前是从父到子
    • 更新完是从子到父

  • 考题：

    • 问在父组件的 mounted 生命周期中能访问子组件的 mounted 生命周期吗？