vue3.0 父子组件传值无法把props的值传递给data里面，因为data()只会运行一次，所以要用watch来进行监听props里面内容的变化

父组件码如下

<template>
 <son v-model="content">
</template>
<script setup lang="ts">
import { ref} from 'vue';
 // 自定义组件依赖
import Codemirror from '@/components/son.vue';
const content = ref("我是父组件传的值"); 
</script>

//无法把props的值传递给data里面，因为data()只会运行一次，所以要用watch来进行监听props里面内容的变化，然后对data里面进行赋值

//watch(要监听的值,(新值,旧值)=>{......})

son.vue

子组件代码如下：

<template>
  <div>
    {{props.modelValue}}
    <input v-model="defaultHtml" @input="confirm" />
  </div>
</template>

<script setup lang="ts">
  import { toRefs,reactive,watch } from "vue";
  // 1.给子组件传递了一个名称为 modelValue 的prop
  const props = defineProps({
      modelValue: {
        type: String || Number,
        default: '',
      },
    });
    

 // 2.给子组件绑定了一个名称为update:modelValue 的自定义事件
  const emit = defineEmits(["update:modelValue"]);

  const state = reactive({
     defaultHtml:props.modelValue,
  })


const { defaultHtml } = toRefs(state);

//3.在绑定的事件回调callback函数中完成了自动将自定义事件触发时传递的实参赋值给绑定的name属性
const confirm = ()=>{
	emit('update:modelValue',state.defaultHtml)
};

//无法把props的值传递给data里面，因为data()只会运行一次，所以要用watch来进行监听props里面内容的变化，然后对data里面进行赋值
//watch(要监听的值,(新值,旧值)=>{......})
watch(props, (news,olds) => {
      console.log(news, "sNum即刻监听",olds);
      console.log(news.modelValue)
      state.defaultHtml=news.modelValue
    });
</script>