{"id":2912,"date":"2020-04-23T17:38:29","date_gmt":"2020-04-23T09:38:29","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2912"},"modified":"2026-08-18T12:35:30","modified_gmt":"2026-08-18T04:35:30","slug":"vue-property-decorator","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2912","title":{"rendered":"vue-property-decorator"},"content":{"rendered":"<section id=\"wenyan\" style=\"font-family: system-ui, 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Symbol', 'Noto Sans', Roboto, sans-serif; line-height: 1.75; font-size: 16px; color: #000000; caret-color: #000000;\" data-provider=\"WenYan\">\n<p style=\"margin: 1em 0px;\"><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">vue-property-decorator<\/code> \u5b8c\u5168\u4f9d\u8d56 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">vue-class-component<\/code>\u3002\u5728 Vue \u5355\u6587\u4ef6\u91cc\u7528 TypeScript \u65f6\uff0c\u5b83\u628a Options API \u6536\u6210\u88c5\u9970\u5668\uff1a\u7c7b\u5b57\u6bb5\u5f53 data\u3001<code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">get<\/code> \u5f53 computed\uff0c<code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Emit<\/code> \/ <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Watch<\/code> \/ <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Prop<\/code> \/ <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Model<\/code> \u5bf9\u5e94\u4e8b\u4ef6\u3001\u4fa6\u542c\u3001\u5c5e\u6027\u548c v-model\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u5b83\u63d0\u4f9b\u8fd9\u4e9b\u80fd\u529b\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Component<\/code>\uff08\u5b8c\u5168\u7ee7\u627f\u4e8e vue-class-component\uff09<\/section>\n<\/li>\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Emit<\/code><\/section>\n<\/li>\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Inject<\/code><\/section>\n<\/li>\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Provide<\/code>\uff08\u539f\u6587\u5199\u4f5c @Provice\uff09<\/section>\n<\/li>\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Prop<\/code><\/section>\n<\/li>\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Watch<\/code><\/section>\n<\/li>\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Model<\/code><\/section>\n<\/li>\n<li>\n<section>Mixins\uff08\u5728 vue-class-component \u4e2d\u5b9a\u4e49\uff09<\/section>\n<\/li>\n<\/ul>\n<table style=\"display: table; text-align: left; overflow: auto; border-collapse: collapse; margin: 1.4em auto; max-width: 100%; table-layout: fixed; overflow-wrap: break-word; word-break: break-all;\" width=\"800\">\n<thead>\n<tr>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u88c5\u9970\u5668<\/th>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u5bf9\u5e94 Options API<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u7c7b\u5b57\u6bb5<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">data<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">get xxx()<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">computed<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">@Emit \/ @Emit(&#8216;name&#8217;)<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">$emit\uff0c\u9ed8\u8ba4\u4e8b\u4ef6\u540d\u662f\u51fd\u6570\u540d\uff08\u9a7c\u5cf0\u8f6c\u6a2a\u6760\uff09<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">@Watch(&#8216;key&#8217;, opts)<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">watch<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">@Prop(type|object|array)<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">props<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">@Model(event, propOptions)<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">model + \u5bf9\u5e94 prop<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e00\u3001\u57fa\u672c\u7528\u6cd5\uff1adata \u4e0e computed<\/h2>\n<p style=\"margin: 1em 0px;\">\u5f15\u5165\u4e4b\u540e\uff0cscript \u53ef\u4ee5\u5199\u6210\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;script lang=\"ts\"&gt;\n    import {Vue, Component} from 'vue-property-decorator';\n\n    @Component({})\n    export default class \"\u7ec4\u4ef6\u540d\" extends Vue{\n        ValA: string = \"hello world\";\n        ValB: number = 1;\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u7b49\u540c\u4e8e<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;script lang=\"es6\"&gt;\n    import Vue from 'vue';\n\n    export default {\n        data(){\n            return {\n                ValA: 'hello world',\n                ValB: 1\n            }\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u603b\u7ed3\uff1adata \u91cc\u7684\u53d8\u91cf\uff0c\u6309 TS \u7c7b\u5b57\u6bb5\u6765\u5199\u5373\u53ef\u3002<\/section>\n<\/li>\n<\/ul>\n<p style=\"margin: 1em 0px;\">\u8ba1\u7b97\u5c5e\u6027\u7528 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">getter<\/code>\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;script lang=\"ts\"&gt;\n    import {Vue, Component} from 'vue-property-decorator';\n\n    @Component({})\n    export default class \"\u7ec4\u4ef6\u540d\" extends Vue{\n        get ValA(){\n            return 1;\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u7b49\u540c\u4e8e<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;script lang=\"es6\"&gt;\n    import Vue from 'vue';\n\n    export default {\n        computed: {\n            ValA: function() {\n                return 1;\n            }\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u603b\u7ed3\uff1a\u628a\u8ba1\u7b97\u5c5e\u6027\u540d\u5199\u6210\u51fd\u6570\uff0c\u524d\u9762\u52a0 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">get<\/code>\u3002\u539f\u6765 computed \u91cc\u6bcf\u4e00\u9879\u90fd\u53d8\u6210\u524d\u7f00 get \u7684\u51fd\u6570\u3002<\/section>\n<\/li>\n<\/ul>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e8c\u3001@Emit<\/h2>\n<p style=\"margin: 1em 0px;\">Vue \u7528 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">$emit<\/code> \/ <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">$on<\/code> \u505a\u4e8b\u4ef6\u3002\u88c5\u9970\u5668\u7248\u7528 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Emit<\/code>\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;script lang=\"ts\"&gt;\n    import {Vue, Component, Emit} from 'vue-property-decorator';\n\n    @Component({})\n    export default class \"\u7ec4\u4ef6\u540d\" extends Vue{\n        mounted(){\n            this.$on('emit-todo', function(n) {\n                console.log(n)\n            })\n\n            this.emitTodo('world');\n        }\n\n            @Emit()\n        emitTodo(n: string){\n            console.log('hello');\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u8fd0\u884c\u4f1a\u6253\u5370 &#8216;hello&#8217; &#8216;world&#8217;\u3002\u7b49\u540c\u4e8e\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;script lang=\"es6\"&gt;\n    import Vue from 'vue';\n\n    export default {\n        mounted(){\n            this.$on('emit-todo', function(n) {\n                console.log(n)\n            })\n\n            this.emitTodo('world');\n        },\n        methods: {\n            emitTodo(n){\n                console.log('hello');\n                this.$emit('emit-todo', n);\n            }\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<p style=\"margin: 1em 0px;\"><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Emit<\/code> \u88c5\u9970\u7684\u51fd\u6570\u8dd1\u5b8c\u540e\uff0c\u4f1a\u89e6\u53d1\u4e0e\u51fd\u6570\u540d\u5bf9\u5e94\u7684\u4e8b\u4ef6\uff08\u9a7c\u5cf0\u8f6c\u6a2a\u6760\uff09\uff0c\u5e76\u628a\u53c2\u6570\u4ea4\u7ed9 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">$emit<\/code>\u3002\u82e5\u8981\u5728 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">emitTodo<\/code> \u91cc\u89e6\u53d1 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">reset<\/code>\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;script lang=\"ts\"&gt;\n    import {Vue, Component, Emit} from 'vue-property-decorator';\n\n    @Component({})\n    export default class \"\u7ec4\u4ef6\u540d\" extends Vue{\n\n        @Emit('reset')\n        emitTodo(n: string){\n\n        }\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u7ed9\u88c5\u9970\u5668\u4f20\u4e8b\u4ef6\u540d\u5373\u53ef\u3002\u51fd\u6570\u53c2\u6570\u4f1a\u5728\u89e6\u53d1\u65f6\u4f20\u51fa\u53bb\u3002\u4e24\u79cd\u5199\u6cd5\uff1a<\/p>\n<ol style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem;\">\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Emit()<\/code> \u4e0d\u4f20\u53c2\uff0c\u4e8b\u4ef6\u540d\u5c31\u662f\u51fd\u6570\u540d\u3002<\/section>\n<\/li>\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Emit(name: string)<\/code> \u4f20\u5165\u8981\u89e6\u53d1\u7684\u4e8b\u4ef6\u540d\u3002<\/section>\n<\/li>\n<\/ol>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e09\u3001@Watch<\/h2>\n<p style=\"margin: 1em 0px;\">\u7528 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Watch<\/code> \u66ff\u6362 Options \u91cc\u7684 watch\u3002Vue \u91cc\u5e38\u89c1\u5199\u6cd5\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">export default{\n    watch: {\n        'child': this.onChangeValue\n            \/\/ \u8fd9\u79cd\u5199\u6cd5\u9ed8\u8ba4 `immediate`\u548c`deep`\u4e3a`false`\n        ,\n        'person': {\n            handler: 'onChangeValue',\n            immediate: true,\n            deep: true\n        }\n    },\n    methods: {\n        onChangeValue(newVal, oldVal){\n            \/\/ todo...\n        }\n    }\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u88c5\u9970\u5668\u7248\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">import {Vue, Component, Watch} from 'vue-property-decorator';\n\n@Watch('child')\nonChangeValue(newVal: string, oldVal: string){\n    \/\/ todo...\n}\n\n@Watch('person', {immediate: true, deep: true})\nonChangeValue(newVal: Person, oldVal: Person){\n    \/\/ todo...\n}<\/code><\/pre>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u8981\u76d1\u542c\u7684\u5c5e\u6027\u540d\uff0c\u7b2c\u4e8c\u4e2a\u662f\u53ef\u9009\u5bf9\u8c61\u3002\u88ab\u88c5\u9970\u7684\u51fd\u6570\u5c31\u662f\u53d8\u5316\u540e\u7684\u5904\u7406\u3002<\/section>\n<\/li>\n<\/ul>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u56db\u3001@Prop<\/h2>\n<p style=\"margin: 1em 0px;\">\u5b50\u7ec4\u4ef6\u6536\u7236\u7ec4\u4ef6\u53c2\u6570\u65f6\u8981\u5b9a\u4e49 Prop\u3002\u4f8b\u5982\u4e09\u4e2a\u5c5e\u6027\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">propA<\/code> \u7c7b\u578b Number<\/section>\n<\/li>\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">propB<\/code> \u9ed8\u8ba4 &#8216;default value&#8217;<\/section>\n<\/li>\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">propC<\/code> \u7c7b\u578b String \u6216 Boolean<\/section>\n<\/li>\n<\/ul>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">export default {\n  props: {\n    propA: {\n      type: Number\n    },\n    propB: {\n      default: 'default value'\n    },\n    propC: {\n      type: [String, Boolean]\n    },\n  }\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u6539\u6210\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;script lang=\"ts\"&gt;\n    import {Vue, Component, Prop} from 'vue-property-decorator';\n\n    @Component({})\n    export default class \"\u7ec4\u4ef6\u540d\" extends Vue{\n        @Prop(Number) propA!: number;\n        @Prop({default: 'default value'}) propB!: string;\n        @Prop([String, Boolean]) propC: string | boolean;\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<blockquote style=\"display: block; font-size: 0.9em; border-left: 3px solid #4870ac; padding: 0.5em 1em; margin: 0px; background: #f6f8fa; color: #40464f;\">\n<p style=\"margin: 1em 0px;\">\u8fd9\u91cc <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">!<\/code> \u548c\u53ef\u9009\u53c2\u6570 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">?<\/code> \u76f8\u53cd\uff0c\u544a\u8bc9 TypeScript \u8fd9\u91cc\u4e00\u5b9a\u6709\u503c\u3002<\/p>\n<\/blockquote>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Prop<\/code> \u53c2\u6570\u53ef\u4ee5\u662f\u7c7b\u578b\u3001\u5bf9\u8c61\u6216\u6570\u7ec4\u3002\u91cc\u9762\u7684 Number \u662f JavaScript \u7c7b\u578b\uff0c\u540e\u9762\u5c5e\u6027\u7c7b\u578b\u624d\u662f TypeScript \u7c7b\u578b\u3002<\/section>\n<\/li>\n<\/ul>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e94\u3001Mixins<\/h2>\n<p style=\"margin: 1em 0px;\">\u7ed3\u5408 TypeScript \u540e\u6709\u4e24\u79cd mixins\u3002\u7b2c\u4e00\u79cd\u6765\u81ea <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">vue-class-component<\/code>\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">\/\/\u5b9a\u4e49\u8981\u6df7\u5408\u7684\u7c7b mixins.ts\nimport Vue from 'vue';\nimport  Component  from 'vue-class-component';\n\n@Component  \/\/ \u4e00\u5b9a\u8981\u7528Component\u4fee\u9970\nexport default class myMixins extends Vue {\n    value: string = \"Hello\"\n}<\/code><\/pre>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">\/\/ \u5f15\u5165\nimport  Component  {mixins}  from 'vue-class-component';\nimport myMixins from 'mixins.ts';\n\n@Component\nexport class myComponent extends mixins(myMixins) {\n                          \/\/ \u76f4\u63a5extends myMinxins \u4e5f\u53ef\u4ee5\u6b63\u5e38\u8fd0\u884c\n      created(){\n          console.log(this.value) \/\/ =&gt; Hello\n    }\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u7b2c\u4e8c\u79cd\uff1a\u5728 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Component<\/code> \u91cc\u6df7\u5165\u3002\u5148\u6539 mixins.ts\uff0c\u58f0\u660e <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">vue\/types\/vue<\/code> \u6a21\u5757\u3001\u5b9e\u73b0 Vue \u63a5\u53e3\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">\/\/ mixins.ts\nimport { Vue, Component } from 'vue-property-decorator';\n\n\ndeclare module 'vue\/types\/vue' {\n    interface Vue {\n        value: string;\n    }\n}\n\n@Component\nexport default class myMixins extends Vue {\n    value: string = 'Hello'\n}<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u6df7\u5165\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">import { Vue, Component, Prop } from 'vue-property-decorator';\nimport myMixins from '@static\/js\/mixins';\n\n@Component({\n    mixins: [myMixins]\n})\nexport default class myComponent extends Vue{\n    created(){\n        console.log(this.value) \/\/ =&gt; Hello\n    }\n}<\/code><\/pre>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u6ca1\u58f0\u660e vue\/types\/vue \u6a21\u5757\u65f6\uff0c\u6df7\u5165\u8981 <strong style=\"color: #4870ac;\">\u7ee7\u627f<\/strong> \u8be5 mixin\uff1b\u58f0\u660e\u4e86\u5c31\u53ef\u4ee5\u5728 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Component<\/code> \u7684 mixins \u91cc\u76f4\u63a5\u6df7\u5165\u3002<\/section>\n<\/li>\n<\/ul>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u516d\u3001@Model<\/h2>\n<p style=\"margin: 1em 0px;\">\u7ec4\u4ef6\u7684 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">model: {prop?: string, event?: string}<\/code> \u7528\u6765\u5b9a\u5236 prop \u548c event\u3002\u9ed8\u8ba4 v-model \u7528 <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">value<\/code> \u4f5c prop\u3001<code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">input<\/code> \u4f5c event\u3002\u5355\u9009\u6846\u3001\u590d\u9009\u6846\u53ef\u80fd\u8981\u628a value \u6d3e\u522b\u7684\u7528\u573a\uff0c\u7528 model \u907f\u5f00\u51b2\u7a81\u3002<\/p>\n<p style=\"margin: 1em 0px;\">Vue \u5b98\u7f51\u4f8b\u5b50\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">Vue.component('my-checkbox', {\n  model: {\n    prop: 'checked',\n    event: 'change'\n  },\n  props: {\n    \/\/ this allows using the `value` prop for a different purpose\n    value: String,\n    \/\/ use `checked` as the prop which take the place of `value`\n    checked: {\n      type: Number,\n      default: 0\n    }\n  },\n  \/\/ ...\n})<\/code><\/pre>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;my-checkbox v-model=\"foo\" value=\"some value\"&gt;&lt;\/my-checkbox&gt;<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u76f8\u5f53\u4e8e\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;my-checkbox\n  :checked=\"foo\"\n  @change=\"val =&gt; { foo = val }\"\n  value=\"some value\"&gt;\n&lt;\/my-checkbox&gt;<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u5373 foo \u53cc\u5411\u7ed1\u5b9a\u7684\u662f\u7ec4\u4ef6\u7684 checked\uff0c\u89e6\u53d1\u66f4\u65b0\u7684\u4e8b\u4ef6\u662f change\u3002\u88c5\u9970\u5668\u7248\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">import { Vue, Component, Model} from 'vue-property-decorator';\n\n@Component\nexport class myCheck extends Vue{\n   @Model ('change', {type: Boolean})  checked!: boolean;\n}<\/code><\/pre>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section><code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Model()<\/code> \u4e24\u4e2a\u53c2\u6570\uff1a\u7b2c\u4e00\u4e2a\u662f event\uff0c\u7b2c\u4e8c\u4e2a\u662f prop \u7684\u7c7b\u578b\u8bf4\u660e\uff08\u7c7b\u4f3c @Prop\uff0c\u7528 JS \u7c7b\u578b\uff09\u3002\u540e\u9762\u518d\u5199 prop \u540d\u548c TS \u7c7b\u578b\u3002<\/section>\n<\/li>\n<\/ul>\n<p style=\"margin: 1em 0px;\">\u6682\u65f6\u5e38\u7528\u7684\u5c31\u8fd9\u4e9b\uff0c<code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Provide<\/code> \u548c <code style=\"font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; color: #4870ac; font-size: 0.9em; font-weight: normal; overflow-wrap: break-word; padding: 2px 4px; border-radius: 3px; margin: 2px; background-color: #f6f8fa; word-break: break-all;\">@Inject<\/code> \u7528\u5230\u4e86\u518d\u5199\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u53c2\u8003: <a class=\"url\" href=\"https:\/\/juejin.im\/post\/5d31907a51882557af271be2#heading-0\" target=\"_blank\" rel=\"noopener\">https:\/\/juejin.im\/post\/5d31907a51882557af271be2#heading-0<\/a><\/p>\n<p style=\"margin: 1em 0px;\">\u94fe\u63a5\uff1a<a class=\"url\" href=\"https:\/\/www.jianshu.com\/p\/d8ed3aa76e9b\" target=\"_blank\" rel=\"noopener\">https:\/\/www.jianshu.com\/p\/d8ed3aa76e9b<\/a><\/p>\n<blockquote style=\"display: block; font-size: 0.9em; border-left: 3px solid #4870ac; padding: 0.5em 1em; margin: 0px; background: #f6f8fa; color: #40464f;\">\n<p style=\"margin: 1em 0px;\"><strong style=\"color: #4870ac;\">\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1avue-property-decorator \u5c31\u662f\u7528\u88c5\u9970\u5668\u628a Vue \u9009\u9879\u5199\u6210 TS \u7c7b\uff1a\u5b57\u6bb5\u662f data\uff0cget \u662f computed\uff0cEmit \/ Watch \/ Prop \/ Model \/ Mixins \u4e00\u4e00\u5bf9\u5e94\u539f\u6765\u7684\u914d\u7f6e\u9879\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>vue-property-decorator \u5b8c\u5168\u4f9d\u8d56 vue-class-component\u3002\u5728 Vue \u5355 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,105],"tags":[205,179],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2912"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2912"}],"version-history":[{"count":2,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2912\/revisions"}],"predecessor-version":[{"id":3686,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2912\/revisions\/3686"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}