保存进度！

2022-11-18 18:05:08 +08:00
parent 71adc2622e
commit ac1cd2e9b7
1 changed files with 61 additions and 0 deletions
--- a/code/web/car_dealer/vue/自定义组件/component.html
+++ b/code/web/car_dealer/vue/自定义组件/component.html
@@ -0,0 +1,61 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-11-18 16:07:50
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-11-18 16:27:14
+ * @FilePath: \car_dealer\vue\自定义组件\component.html
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>自定义组件</title>
+        <link rel="stylesheet" href="../../css/root.css" />
+        <link rel="stylesheet" href="../../css/normalize.css" />
+        <link rel="stylesheet" href="../../css/app.css" />
+    </head>
+    <body>
+        <div class="content">
+            <div id="app">
+                <my-component title="测试" v-model="count"></my-component>
+            </div>
+        </div>
+    </body>
+    <script src="../../js/vue/vue.global.js"></script>
+    <script>
+        const root = {
+            data() {
+                return {
+                    count: 0,
+                    value: "",
+                };
+            },
+        };
+        const component = {
+            template:
+                "<div><button @click='doClick($event)'>{{title}}</button></div>",
+            props: ["title", "modelValue"],
+            data() {
+                return {
+                    count: 0,
+                };
+            },
+            methods: {
+                doClick(event) {
+                    this.count++;
+
+                    this.$emit("update:modelValue", this.count);
+                },
+            },
+        };
+
+        const vm = Vue.createApp(root);
+        vm.component("my-component", component);
+        vm.mount("#app");
+    </script>
+</html>