Vue 3.0 nexttick 和子组件向父组件发射一个事件(

一. nexttick

官方解释：将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

// 我还是用需求来写代码吧:需求:
// 点击一个按钮，我们会修改在h2中显示的message；
// message被修改后，获取h2的高度；

实现上面的案例我们有三种方式：
方式一：在点击按钮后立即获取到h2的高度（错误的做法）
方式二：在updated生命周期函数中获取h2的高度（但是其他数据更新，也会执行该操作） 
方式三：使用nexttick函数；

<template>
  <div>
    <h1>nexttick的基本使用:</h1>
    <h1>当前计数:{{ counter }}</h1>
    <button @click="increment">+1</button>
    <h1 class="title" ref="titleRef">{{ message }}</h1>
    <button @click="addMessageContent">点击修改message内容</button>
  </div>
</template>

<script>
import { ref,onUpdated,nextTick} from "vue";
export default {
  setup() {
    const message = ref("哈哈哈");
    const titleRef = ref(null);
    const counter = ref(0)
    const addMessageContent = () => {
      message.value += "呵呵呵";
      // 1.
      // console.log(titleRef.value.offsetHeight); // 拿到当前修改过后的DOM元素的高度,这种拿到的是错误的

      // 3. 使用 nextTick 这个函数来做操作
      nextTick(()=> {
        console.log(titleRef.value.offsetHeight);
      })
    };
    // 2. 这个做的话 有一个弊端: 就是只要上面的界面发生的更新 都会调用这个钩子,所以 使用这个钩子函数是不合适的
    // onUpdated(()=> {
    //   console.log(titleRef.value.offsetHeight);
    // })

    const increment = ()=> {
      counter.value++
    }
    return {
      message,
      titleRef,
      counter,
      increment,
      addMessageContent,
    };
  },
};
</script>

<style>
.title {
  width: 120px;
}
</style>

PS: 官方解释：将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

二. 子组件向父组件发射一个事件

二.一 son.vue

<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
export default {
  setup(props, context) {
    const btnClick = () => {
      console.log(context.emit);
      context.emit('changeName', false)
    }

    return {
      btnClick
    }
  },
}
</script>

<style>
</style>

二.二 father.vue

<template>
  <h1>我是父组件</h1>
  <children @changeName="changeName"></children>

  <h2 style="color:red;" v-if="obj.isShow">哈哈哈哈</h2>
</template>

<script>
import { reactive } from '@vue/reactivity'
import children from './子组件.vue'
export default {
  components: {
    children,
  },
  setup() {
    const obj = reactive({
      isShow: true,
    })
    const changeName = (flag) => {
      console.log(flag);
      obj.isShow = flag
    }

    return {
      changeName,
      obj
    }
  },
}
</script>

<style>
</style>

实际截图