vue3父组件动态改变传给子组件的值

父组件

 <SearchBox @searchVal="getSearchVal"  :content='content'>
        <template #searchBtn>
          <div class="pressButton" @click="getsearchgame">搜索</div>
        </template>
 </SearchBox>



setup() {
    const state = reactive({
      content:'',  //会改变
    });
}

子组件

 <van-search
      @blur="change"
      clearable
      v-model="value"
      placeholder="搜"
      background="#242424"
      shape="round"
      @clear="change"
    >
      <template #left-icon>
        <van-icon
          name="search"
          size="22"
          color="#f6c698"
        />
      </template>
    </van-search>


<script>
import { watch, ref } from "vue";
export default {
  props: ["content"],
  setup(props, ctx) {
    const value = ref(null);
    const change = () => {
      ctx.emit("searchVal", value.value);
    };
    /*监听props*/
    watch(props, (newProps) => {
      value.value = newProps.content;
    });

    return { value, change };
  },
};
</script>