Vue3子组件接受父组件的传值，并把显示的输入交给父组件控制，使父组件实时得到子组件的输入

子组件  MdEditorView.vue

<template>
  <Editor :value="value" :plugins="plugins" @change="handleChange" />
</template>

<script setup lang="ts">
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import { Editor, Viewer } from "@bytemd/vue-next";
import { ref, withDefaults, defineProps } from "vue";

/**
 * 定义组件的属性类型
 */
interface Props {
  value: string;
  handleChange: (v: string) => void;
}

const value = ref("");

//引入相关插件
const plugins = [
  gfm(),
  highlight(),
  // Add more plugins here
];

const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  handleChange: (v: string) => {
    console.log(v);
  },
});

const handleChange = (v: string) => {
  value.value = v;
};
</script>

<style scoped></style>

子组件 -- 定义属性

/**
 * 定义组件的属性类型
 */
interface Props {
  value: string;
  handleChange: (v: string) => void;
}


/**
 *定义组件属性的默认值
 */
const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  handleChange: (v: string) => {
    console.log(v);
  },
});

父组件 -- 调用 -- 父组件控制子组件的传参

<template>
  <div id="exampleView">
    <MdEditor :value="mdValue" :handleChange="onMdChange" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import MdEditor from "@/components/MdEditor.vue";

const mdValue = ref("");

const onMdChange = (v: string) => {
  mdValue.value = v;
  console.log(v);
};

</script>

<style></style>