官方地址
https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md#closed-by-default
新的写法
相比之下写法变得更加简化,下面具体看是否真香
子组件

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210623152824701.png
组件传值
父组件

下面上源码

//子组件
<template>
    <div>
        <div id="editorbox"></div>
        <el-button @click="getHtml">获取文本内容</el-button>
    </div>
</template>
<script setup lang='ts' >
import { ref, onMounted, defineEmits, defineProps, defineExpose } from "vue";
import E from "wangeditor";
const editorRef = ref()
const props = defineProps({
    data: String
})
console.log(props);
const emit = defineEmits(['getHtml'])
const getHtml = () => {
    const texthtml = editorRef.value.txt.html()
    emit("getHtml", texthtml)
}
const setHtml = (val: string) => {
    editorRef.value.txt.html(val) // 重新设置编辑器内
}
const clearnHtml = () => {
    editorRef.value.txt.clear()
}
onMounted(() => {
    const editor = new E('#editorbox')
    editor.config.placeholder = '请输入内容';
    editor.config.menus = [
        // 菜单配置
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        "code", // 插入代码
        "undo", // 撤销
        "redo", // 重复
        "video",//视频
    ]

    editor.config.height = props.data;
    editor.config.zIndex = 100;
    editor.config.showLinkImg = false; // 隐藏“网络图片”tab
    editor.config.showLinkVideo = false//使用本地上传视频
    editor.config.showFullScreen = true //显示全屏按钮
    editor.config.uploadImgShowBase64 = false //用 base64 保存图片
    // editor.config.uploadImgShowBase64 = false; // 使用 base64 保存图片
    // editor.config.pasteText = true; // 只粘贴纯文本
    // editor.config.uploadImgMaxSize = 3 * 1024 * 1024; //限制图片大小
    // editor.config.uploadImgServer = "wdx"; //上传图片地址
    // editor.config.uploadImgHeaders = {
    //     Authorization: 'wdx' // 设置请求头
    // };
    // editor.config.uploadFileName = "file"; //设置字段
    // editor.config.uploadImgMaxLength = 10; // 限制一次最多上传 5 张图片
    // editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
    // editor.config.uploadImgHooks = {
    //     fail: (xhr, editor, result) => {
    //         // 插入图片失败回调
    //     },
    //     success: (xhr, editor, result) => {
    //         // 图片上传成功回调

    //     },

    //     customInsert: (insertImg, result, editor) => {
    //         // 图片上传成功，插入图片的回调
    //         //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...] 
    //         let url = result.data.url;
    //         insertImg(url);
    //     },
    // }
    editorRef.value = editor
    editor.create();

})
// console.dir(expose);
defineExpose({
    setHtml, getHtml, clearnHtml
})
</script>

<style scoped lang="scss">
</style>

父组件

<template>
    <div>
        {{ boxHeight.data }}
        <EditorChild ref="box" :data="boxHeight.data" @getHtml="getHtml" />
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive } from "vue";
import EditorChild from '../components/editor-child.vue'
const getHtml = (e: any) => {
    console.log('获取内容==>', e);
}

const boxHeight = reactive({
    data: 400
})

const box = ref(null)
onMounted(() => {
    console.log(box.value);
    let p = '<p style="color:red">我是红色字体</p>'
    box.value.setHtml(p)
})


</script>

<style scoped lang="scss">
</style>

默认情况下

css变量