38 lines
929 B
Vue
38 lines
929 B
Vue
<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>
|