vue父组件监听子组件的生命周期（vue3.使用setup语法糖监听父组件的变化。父子组件传值，监听，计算属性）

setup语法糖就是把setup写在script标签里 子组件

<script setup>

import { ref, computed, onBeforeMount, onMounted, getCurrentInstance, template, defineProps, defineEmits, watch } from "vue"; const props = defineProps({ message: { type: Object, }, }); const emits = defineEmits(["next"]); let _hoverStyle = computed(() => { return { top: 1, opacity: 0 } }) watch( props.message , (newValue, oldValue)=> { console.log( newValue) 这里如果想要访问当前页面的一个函数的话必须保证函数在watch这段代码之前           ，否则会抱函数underfined           。如果去掉immediate: true 那么函数位置随意 
  
 
  
 
  
 
  
 
  
 
 。但是刚进入页面的时候这个函数是不执行的 
  
 
  
 
  
 
  
 
  
 
 ，你必须在onMount里面再去访问一次这个函数











。 }, //可选immediate: true马上执行 { deep: true, immediate: true }, );

或者是这样写 
  
  
  
  
  。

watch( () => props.message, (newValue, oldValue)=> { disposeData(newValue)//初始化已有数据 }, );

click(){

emit(next,{传回父组件的参数})

}

父组件

<son :message="message" @next="next"></son>

next(e){

子组件传来的值e

}