保存进度!
This commit is contained in:
		
							
								
								
									
										61
									
								
								code/web/car_dealer/vue/自定义组件/component.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										61
									
								
								code/web/car_dealer/vue/自定义组件/component.html
									
									
									
									
									
										Normal file
									
								
							@@ -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>
 | 
				
			||||||
		Reference in New Issue
	
	Block a user