006.组件的补充

Posted 2021-07-22 Ruovan

组件补充

• • 01. 组件化基础
  • 02. 监听组件的生命周期
  • 03. 动态组件
  • 04. 递归组件
  • 05. 如何在子组件更新父组件的值？
  • 06. 如何重新渲染组件？

---

01. 组件化基础

• 三个API
  • 属性prop
    • 定义组件可配置属性
    • 单向数据流
  • 事件event
    • 自定义事件
    • 通过$emit派发事件，通过$on监听这个事件
  • 插槽slot
    • 分发组件内容

前面内容已经讲解，此处略过

02. 监听组件的生命周期

• 比如有父组件Parent和子组件Child，如果父组件监听到子组件挂载mounted就做一些逻辑处理，常规的写法可能如下：

  // Parent.vue
  <Child @mounted="doSomething"/>
  
  // Child.vue
  <script>
  mounted() {
    this.$emit("mounted");
  }
  </script>
  

• 还有一种特别简单的方式，子组件不需要任何处理，只需要在父组件引用的时候通过@hook来监听即可，代码重写如下：

  <Child @hook:mounted="doSomething"/>
  

• 当然这里不仅仅是可以监听mounted，其它的生命周期事件，例如：created，updated等都可以

03. 动态组件

• Vue提供了一个方法来实现动态组件，也称为元组件

  • 即：将组件动态绑定到 is 特性上，依靠is的值来决定哪一个组件被渲染

  <template>
  	<component :is="component_name"></component>
  </template>
  <script>
  export default {
      data(){
          return {
              // 动态组件
              component_name: 'component1' // component2、component3...
          }
      }
  }
  </script>
  

04. 递归组件

• 当组件拥有 name 属性的时候，就可以在它的内部递归调用自己

  但是如果没有结束条件的情况，直接递归会报错，所以针对递归组件，我们需要加上结束条件

  <template>
  	<my-component></my-component>
  </template>
  <script>
  export default {
      name: 'myComponent'
  }
  </script>
  

05. 如何在子组件更新父组件的值？

• 第一种方式：通过向父组件派发一个自定义事件，由父组件进行修改，并响应到子组件

• 第二种方式：传递引用类型的数据

  • 父组件通过属性绑定的方式传值给子组件，子组件通过props属性接收数据，这是单向数据流
  • 但通过props传入的值是引用类型的，如数组、对象
    • 那么子组件对props的改动也可以影响父组件的状态
    • 但不建议在子组件直接修改props传入的值

• 第三种方式：通过.sync修饰符（详情请看下一章）

06. 如何重新渲染组件？

• 切换v-if的true | false，可以让组件重新渲染

  • v-if的切换会直接销毁和重建DOM节点

    // 自定义一个方法
    changeFlag(){
        this.flag = false; // 设置为false，不渲染该节点
        this.$nextTick(() => {
            this.flag = true; // 在nextTick中重新渲染
        })
    }
    

• 当组件上的key值改变时，组件自动重新渲染

  changeKey(){
      // 更新 key 值
      this.keyValue++
  }
  

• 使用this.$forceUpdate()，强制执行更新

  • 对于数据更新，但视图没有更新的情况可以使用

  forceUpdate(){
      this.$forceUpdate()
  }