"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h1: "h1", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { id: "vue3-开发笔记", children: "Vue3 开发笔记" }), "\n", _jsx(_components.h2, { id: "1-vue-3-编译宏详解", children: "1. Vue 3 编译宏详解" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "宏是在编译时执行的代码，而不是运行时执行的代码。" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "vue" }), "中的宏到底是什么？"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "vue3" }), "的宏是一种特殊的代码，在编译时会将这些特殊的代码转换为浏览器能够直接运行的指定代码，根据宏的功能不同，转换后的代码也不同。"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["为什么这些宏不需要手动从", _jsx(_components.code, { children: "vue" }), "中", _jsx(_components.code, { children: "import" }), "？"] }), "\n", _jsxs(_components.p, { children: ["因为在编译时已经将这些宏替换为指定的浏览器能够直接运行的代码，在运行时已经不存在这些宏相关的代码，自然不需要从", _jsx(_components.code, { children: "vue" }), "中", _jsx(_components.code, { children: "import" }), "。"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["为什么只能在", _jsx(_components.code, { children: "setup" }), "顶层中使用这些宏？"] }), "\n", _jsxs(_components.p, { children: ["因为在编译时只会a去处理", _jsx(_components.code, { children: "setup" }), "顶层的宏，其他地方的宏会原封不动的输出回来。在运行时由于我们没有在任何地方定义这些宏，当代码执行到宏的时候当然就会报错。"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "11-defineprops接收组件-props", children: "1.1 defineProps：接收组件 Props" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "父子组件传参" }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "Child" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " name" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "xiaoman" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " setup" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Child " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./views/child.vue" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "style" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["子组件使用", _jsx(_components.code, { children: "defineProps" }), "接受值"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " {{ name }}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " setup" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " defineProps" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " name" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " String" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "使用TS字面量模式" }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " {{ name }}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " setup" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " defineProps" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " name" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "string" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }>" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Vue3.3" }), " 新增 defineProps 可以接受泛型"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "Child" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " :" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "name" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "[" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "xiaoman" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " //-------------子组件-----------------" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " {{ name }}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " generic" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " setup" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " defineProps" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " name" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "[]" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }>" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "反应式 Props 解构" }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "const { msg = 'hello' } = defineProps(['msg'])" }) }) }) }) }), "\n", _jsx(_components.h3, { id: "12-defineemits定义事件", children: "1.2 defineEmits：定义事件" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "button" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " @click" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "send" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "派发事件" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " setup" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " emit " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " defineEmits" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "send" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "[" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "name" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "string" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "]" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " send " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 通过派发事件，将数据传递给父组件" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " emit" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "send" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "我是子组件的数据" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsx(_components.h3, { id: "13-defineexpose暴露组件属性", children: "1.3 defineExpose：暴露组件属性" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "defineExpose({" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " name:\"张三\"" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "})" }) })] }) }) }), "\n", _jsx(_components.h3, { id: "14-defineslots声明插槽", children: "1.4 defineSlots：声明插槽" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "父组件传递插槽内容：" }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "Child" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " :data" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "list" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " #" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "default" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "{{ item.name }}" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " setup" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Child " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./views/child.vue" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " list " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " name" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "张三" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " name" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "李四" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " name" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "王五" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "]" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "style" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] })] }) }) }), "\n", _jsx(_components.p, { children: "**子组件声明插槽类型：**只做声明不做实现同时约束slot类型" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "template" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "ul" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "li" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " v-for" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "(item,index) in data" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "slot" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " :index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " :item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " generic" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " setup" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: "defineProps" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " data" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " T" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "[]" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: "defineSlots" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "<{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " default" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":{" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "T" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#E53935" }, children: "index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}):" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "void" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsx(_components.h3, { id: "15-defineoptions定义组件选项", children: "1.5 defineOptions：定义组件选项" }), "\n", _jsx(_components.p, { children: "主要是用来定义 Options API 的选项" }), "\n", _jsx(_components.p, { children: "常用的就是定义name 在seutp 语法糖模式发现name不好定义了需要在开启一个script自定义name现在有了defineOptions就可以随意定义name了" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "defineOptions({" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " name:\"Child\"," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " inheritAttrs:false," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "})" }) })] }) }) }), "\n", _jsx(_components.h3, { id: "16-definemodel声明-v-model", children: "1.6 defineModel：声明 v-model" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "//父组件 " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "OperateDialog" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " v-model" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "show" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "addDialog" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " :" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "title" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "dialogTitle" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " :" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "currentFormData" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "currentFormData" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " @" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "updateList" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "getUserList" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " >" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "// 子组件" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "const dialogShow = defineModel('show', { required: true })" }) })] }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://blog.vuejs.org/posts/vue-3-3", children: "https://blog.vuejs.org/posts/vue-3-3" }) }), "\n", _jsx(_components.h2, { id: "2-scss-使用记录", children: "2. SCSS 使用记录" }), "\n", _jsxs(_components.h3, { id: "21-使用-apply-和-important", children: ["2.1 使用 ", _jsx(_components.code, { children: "@apply" }), " 和 ", _jsx(_components.code, { children: "!important" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "scss", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "scss", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "@apply " }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "text-primary" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " #{" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: "!important" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "};" })] }) }) }) }), "\n", _jsx(_components.h3, { id: "22-深度作用选择器样式穿透", children: "2.2 深度作用选择器（样式穿透）" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "scss", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "scss", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: ":deep(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "qu-menu-item-selected" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#8796B0" }, children: " color" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " red" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "......." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Vue3 开发笔记

目录