<template>
  <div>
    <h1 class="text-red">我是远程加载的页面</h1>
    <input v-model="input" placeholder="placeholder" @input="changeValue" />
    <button @click="emitParentFun">调用父组件的方法</button>
  </div>
</template>

<script setup>
  import { defineProps, defineEmits, ref, onMounted } from 'vue';

  const props = defineProps(['modelValue']);
  // 更新model绑定的值固定写法: update:modelValue
  const emit = defineEmits(['update:modelValue', 'childClick']);

  let input = ref('');
  onMounted(() => {
    input.value = props.modelValue;
    // window环境指向的是接收方的window环境
    console.log(window.testName);
  });

  const changeValue = (e) => {
    // 修改父组件的值
    emit('update:modelValue', e.target.value);
  };

  const emitParentFun = () => {
    emit('childClick', input.value);
  };
</script>

<style scope>
  .text-red {
    color: red;
  }
</style>
