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

}