{"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":"2020-04-23T17:38:29","modified_gmt":"2020-04-23T09:38:29","slug":"vue-property-decorator","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2912","title":{"rendered":"vue-property-decorator"},"content":{"rendered":"<h3>vue-property-decorator<\/h3>\n<p>\u8fd9\u4e2a\u7ec4\u4ef6\u5b8c\u5168\u4f9d\u8d56\u4e8e<code>vue-class-component<\/code>.\u5b83\u5177\u5907\u4ee5\u4e0b\u51e0\u4e2a\u5c5e\u6027:<\/p>\n<ul>\n<li>@Component (\u5b8c\u5168\u7ee7\u627f\u4e8e<code>vue-class-component<\/code>)<\/li>\n<li>@Emit<\/li>\n<li>@Inject<\/li>\n<li>@Provice<\/li>\n<li>@Prop<\/li>\n<li>@Watch<\/li>\n<li>@Model<\/li>\n<li>Mixins (\u5728<code>vue-class-component<\/code>\u4e2d\u5b9a\u4e49);<\/li>\n<\/ul>\n<h3>\u4f7f\u7528<\/h3>\n<p>\u5f53\u6211\u4eec\u5728<code>vue<\/code>\u5355\u6587\u4ef6\u4e2d\u4f7f\u7528<code>TypeScript<\/code>\u65f6,\u5f15\u5165<code>vue-property-decorator<\/code>\u4e4b\u540e,<code>script<\/code>\u4e2d\u7684\u6807\u7b7e\u5c31\u53d8\u4e3a\u8fd9\u6837:<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-dart\" lang=\"dart\">&lt;script lang=\"ts\"&gt;\r\n    import {Vue, Component} from 'vue-property-decorator';\r\n\r\n    @Component({})\r\n    export default class \"\u7ec4\u4ef6\u540d\" extends Vue{\r\n        ValA: string = \"hello world\";\r\n        ValB: number = 1;\r\n    }\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<p>\u7b49\u540c\u4e8e<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-xml\" lang=\"xml\">&lt;script lang=\"es6\"&gt;\r\n    import Vue from 'vue';\r\n\r\n    export default {\r\n        data(){\r\n            return {\r\n                ValA: 'hello world',\r\n                ValB: 1\r\n            }\r\n        }\r\n    }\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<ul>\n<li>\u603b\u7ed3: \u5bf9\u4e8e<code>data<\/code>\u91cc\u7684\u53d8\u91cf\u5bf9\u9876,\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u6309<code>ts<\/code>\u5b9a\u4e49\u7c7b\u53d8\u91cf\u7684\u5199\u6cd5\u5199\u5c31\u53ef\u4ee5<\/li>\n<\/ul>\n<p>\u90a3\u4e48\u5982\u679c\u662f\u8ba1\u7b97\u5c5e\u6027\u5462? \u8fd9\u5c31\u8981\u7528\u5230<code>getter<\/code>\u4e86.<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-dart\" lang=\"dart\">&lt;script lang=\"ts\"&gt;\r\n    import {Vue, Component} from 'vue-property-decorator';\r\n\r\n    @Component({})\r\n    export default class \"\u7ec4\u4ef6\u540d\" extends Vue{\r\n        get ValA(){\r\n            return 1;\r\n        }\r\n    }\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<p>\u7b49\u540c\u4e8e<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-xml\" lang=\"xml\">&lt;script lang=\"es6\"&gt;\r\n    import Vue from 'vue';\r\n\r\n    export default {\r\n        computed: {\r\n            ValA: function() {\r\n                return 1;\r\n            }\r\n        }\r\n    }\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<ul>\n<li>\u603b\u7ed3: \u5bf9\u4e8e<code>Vue<\/code>\u4e2d\u7684\u8ba1\u7b97\u5c5e\u6027,\u6211\u4eec\u53ea\u9700\u8981\u5c06\u8be5\u8ba1\u7b97\u5c5e\u6027\u540d\u5b9a\u4e49\u4e3a\u4e00\u4e2a\u51fd\u6570,\u5e76\u5728\u51fd\u6570\u524d\u52a0\u4e0a<code>get<\/code>\u5173\u952e\u5b57\u5373\u53ef.<\/li>\n<\/ul>\n<p>\u539f\u672c<code>Vue<\/code>\u4e2d\u7684<code>computed<\/code>\u91cc\u7684\u6bcf\u4e2a\u8ba1\u7b97\u5c5e\u6027\u90fd\u53d8\u6210\u4e86\u5728\u524d\u7f00\u6dfb\u52a0<code>get<\/code>\u7684\u51fd\u6570.<\/p>\n<hr \/>\n<h3>@Emit<\/h3>\n<p>\u5173\u4e8e<code>Vue<\/code>\u4e2d\u7684\u4e8b\u4ef6\u7684\u76d1\u542c\u4e0e\u89e6\u53d1,<code>Vue<\/code>\u63d0\u4f9b\u4e86\u4e24\u4e2a\u51fd\u6570<code>$emit<\/code>\u548c<code>$on<\/code>.\u90a3\u4e48\u5728<code>vue-property-decorator<\/code>\u4e2d\u5982\u4f55\u4f7f\u7528\u5462?<br \/>\n\u8fd9\u5c31\u9700\u8981\u7528\u5230<code>vue-property-decorator<\/code>\u63d0\u4f9b\u7684<code>@Emit<\/code>\u5c5e\u6027.<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-dart\" lang=\"dart\">&lt;script lang=\"ts\"&gt;\r\n    import {Vue, Component, Emit} from 'vue-property-decorator';\r\n\r\n    @Component({})\r\n    export default class \"\u7ec4\u4ef6\u540d\" extends Vue{\r\n        mounted(){\r\n            this.$on('emit-todo', function(n) {\r\n                console.log(n)\r\n            })\r\n\r\n            this.emitTodo('world');\r\n        }\r\n\r\n            @Emit()\r\n        emitTodo(n: string){\r\n            console.log('hello');\r\n        }\r\n    }\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<p>\u8fd0\u884c\u4e0a\u9762\u7684\u4ee3\u7801\u4f1a\u6253\u5370 &#8216;hello&#8217; &#8216;world&#8217;, \u4e3a\u4ec0\u4e48\u5462? \u8ba9\u6211\u4eec\u6765\u770b\u770b\u5b83\u7b49\u540c\u4e8e\u4ec0\u4e48<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-xml\" lang=\"xml\">&lt;script lang=\"es6\"&gt;\r\n    import Vue from 'vue';\r\n\r\n    export default {\r\n        mounted(){\r\n            this.$on('emit-todo', function(n) {\r\n                console.log(n)\r\n            })\r\n\r\n            this.emitTodo('world');\r\n        },\r\n        methods: {\r\n            emitTodo(n){\r\n                console.log('hello');\r\n                this.$emit('emit-todo', n);\r\n            }\r\n        }\r\n    }\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<p>\u53ef\u4ee5\u770b\u5230,\u5728<code>@Emit<\/code>\u88c5\u9970\u5668\u7684\u51fd\u6570\u4f1a\u5728\u8fd0\u884c\u4e4b\u540e\u89e6\u53d1\u7b49\u540c\u4e8e\u5176\u51fd\u6570\u540d(<code>\u9a7c\u5cf0\u5f0f\u4f1a\u8f6c\u4e3a\u6a2a\u6760\u5f0f\u5199\u6cd5<\/code>)\u7684\u4e8b\u4ef6, \u5e76\u5c06\u5176\u51fd\u6570\u4f20\u9012\u7ed9<code>$emit<\/code>.<br \/>\n\u5982\u679c\u6211\u4eec\u60f3\u89e6\u53d1\u7279\u5b9a\u7684\u4e8b\u4ef6\u5462,\u6bd4\u5982\u5728<code>emitTodo<\/code>\u4e0b\u89e6\u53d1<code>reset<\/code>\u4e8b\u4ef6:<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-dart\" lang=\"dart\">&lt;script lang=\"ts\"&gt;\r\n    import {Vue, Component, Emit} from 'vue-property-decorator';\r\n\r\n    @Component({})\r\n    export default class \"\u7ec4\u4ef6\u540d\" extends Vue{\r\n\r\n        @Emit('reset')\r\n        emitTodo(n: string){\r\n\r\n        }\r\n    }\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<p>\u6211\u4eec\u53ea\u9700\u8981\u7ed9\u88c5\u9970\u5668<code>@Emit<\/code>\u4f20\u9012\u4e00\u4e2a\u4e8b\u4ef6\u540d\u53c2\u6570<code>reset<\/code>,\u8fd9\u6837\u51fd\u6570<code>emitTodo<\/code>\u8fd0\u884c\u4e4b\u540e\u5c31\u4f1a\u89e6\u53d1<code>reset<\/code>\u4e8b\u4ef6.<\/p>\n<ul>\n<li>\u603b\u7ed3:\u5728<code>Vue<\/code>\u4e2d\u6211\u4eec\u662f\u4f7f\u7528<code>$emit<\/code>\u89e6\u53d1\u4e8b\u4ef6,\u4f7f\u7528<code>vue-property-decorator<\/code>\u65f6,\u53ef\u4ee5\u501f\u52a9<code>@Emit<\/code>\u88c5\u9970\u5668\u6765\u5b9e\u73b0.<code>@Emit<\/code>\u4fee\u9970\u7684\u51fd\u6570\u6240\u63a5\u53d7\u7684\u53c2\u6570\u4f1a\u5728\u8fd0\u884c\u4e4b\u540e\u89e6\u53d1\u4e8b\u4ef6\u7684\u65f6\u5019\u4f20\u9012\u8fc7\u53bb.<br \/>\n<code>@Emit<\/code>\u89e6\u53d1\u4e8b\u4ef6\u6709\u4e24\u79cd\u5199\u6cd5<\/li>\n<\/ul>\n<ol>\n<li><code>@Emit()<\/code>\u4e0d\u4f20\u53c2\u6570,\u90a3\u4e48\u5b83\u89e6\u53d1\u7684\u4e8b\u4ef6\u540d\u5c31\u662f\u5b83\u6240\u4fee\u9970\u7684\u51fd\u6570\u540d.<\/li>\n<li><code>@Emit(name: string)<\/code>,\u91cc\u9762\u4f20\u9012\u4e00\u4e2a\u5b57\u7b26\u4e32,\u8be5\u5b57\u7b26\u4e32\u4e3a\u8981\u89e6\u53d1\u7684\u4e8b\u4ef6\u540d.<\/li>\n<\/ol>\n<hr \/>\n<h3>@Watch<\/h3>\n<p>\u6211\u4eec\u53ef\u4ee5\u5229\u7528<code>vue-property-decorator<\/code>\u63d0\u4f9b\u7684<code>@Watch<\/code>\u88c5\u9970\u5668\u6765\u66ff\u6362<code>Vue<\/code>\u4e2d\u7684<code>watch<\/code>\u5c5e\u6027,\u4ee5\u6b64\u6765\u76d1\u542c\u503c\u7684\u53d8\u5316.<\/p>\n<p>\u5728<code>Vue<\/code>\u4e2d\u76d1\u542c\u5668\u7684\u4f7f\u7528\u5982\u4e0b:<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-dart\" lang=\"dart\">export default{\r\n    watch: {\r\n        'child': this.onChangeValue\r\n            \/\/ \u8fd9\u79cd\u5199\u6cd5\u9ed8\u8ba4 `immediate`\u548c`deep`\u4e3a`false`\r\n        ,\r\n        'person': {\r\n            handler: 'onChangeValue',\r\n            immediate: true,\r\n            deep: true\r\n        }\r\n    },\r\n    methods: {\r\n        onChangeValue(newVal, oldVal){\r\n            \/\/ todo...\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n<p>\u90a3\u4e48\u6211\u4eec\u5982\u4f55\u4f7f\u7528<code>@Watch<\/code>\u88c5\u9970\u5668\u6765\u6539\u9020\u5b83\u5462?<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-tsx\" lang=\"tsx\">import {Vue, Component, Watch} from 'vue-property-decorator';\r\n\r\n@Watch('child')\r\nonChangeValue(newVal: string, oldVal: string){\r\n    \/\/ todo...\r\n}\r\n\r\n@Watch('person', {immediate: true, deep: true})\r\nonChangeValue(newVal: Person, oldVal: Person){\r\n    \/\/ todo...\r\n}\r\n<\/code><\/pre>\n<ul>\n<li>\u603b\u7ed3: <code>@Watch<\/code>\u4f7f\u7528\u975e\u5e38\u7b80\u5355,\u63a5\u53d7\u7b2c\u4e00\u4e2a\u53c2\u6570\u4e3a\u8981\u76d1\u542c\u7684\u5c5e\u6027\u540d \u7b2c\u4e8c\u4e2a\u5c5e\u6027\u4e3a\u53ef\u9009\u5bf9\u8c61.<code>@Watch<\/code>\u6240\u88c5\u9970\u7684\u51fd\u6570\u5373\u76d1\u542c\u5230\u5c5e\u6027\u53d8\u5316\u4e4b\u540e\u7684\u64cd\u4f5c.<\/li>\n<\/ul>\n<hr \/>\n<h3>@Prop<\/h3>\n<p>\u6211\u4eec\u5728\u4f7f\u7528<code>Vue<\/code>\u65f6\u6709\u65f6\u4f1a\u9047\u5230\u5b50\u7ec4\u4ef6\u63a5\u6536\u7236\u7ec4\u4ef6\u4f20\u9012\u6765\u7684\u53c2\u6570.\u6211\u4eec\u9700\u8981\u5b9a\u4e49<code>Prop<\/code>\u5c5e\u6027.<\/p>\n<p>\u6bd4\u5982\u5b50\u7ec4\u4ef6\u4ece\u7236\u7ec4\u4ef6\u63a5\u6536\u4e09\u4e2a\u5c5e\u6027<code>propA<\/code>,<code>propB<\/code>,<code>propC<\/code>.<\/p>\n<ul>\n<li><code>propA<\/code>\u7c7b\u578b\u4e3a<code>Number<\/code><\/li>\n<li><code>propB<\/code>\u9ed8\u8ba4\u503c\u4e3a<code>default value<\/code><\/li>\n<li><code>propC<\/code>\u7c7b\u578b\u4e3a<code>String<\/code>\u6216\u8005<code>Boolean<\/code><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-css\" lang=\"css\">export default {\r\n  props: {\r\n    propA: {\r\n      type: Number\r\n    },\r\n    propB: {\r\n      default: 'default value'\r\n    },\r\n    propC: {\r\n      type: [String, Boolean]\r\n    },\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>\u6211\u4eec\u4f7f\u7528<code>vue-property-decorator<\/code>\u63d0\u4f9b\u7684<code>@Prop<\/code>\u53ef\u4ee5\u5c06\u4e0a\u9762\u7684\u4ee3\u7801\u6539\u9020\u4e3a\u5982\u4e0b:<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-dart\" lang=\"dart\">&lt;script lang=\"ts\"&gt;\r\n    import {Vue, Component, Prop} from 'vue-property-decorator';\r\n\r\n    @Component({})\r\n    export default class \"\u7ec4\u4ef6\u540d\" extends Vue{\r\n        @Prop(Number) propA!: number;\r\n        @Prop({default: 'default value'}) propB!: string;\r\n        @propC([String, Boolean]) propC: string | boolean;\r\n    }\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<blockquote><p>\u8fd9\u91cc <code>!<\/code>\u548c\u53ef\u9009\u53c2\u6570<code>?<\/code>\u662f\u76f8\u53cd\u7684, <code>!<\/code>\u544a\u8bc9<code>TypeScript<\/code>\u6211\u8fd9\u91cc\u4e00\u5b9a\u6709\u503c.<\/p><\/blockquote>\n<ul>\n<li>\u603b\u7ed3: <code>@Prop<\/code>\u63a5\u53d7\u4e00\u4e2a\u53c2\u6570\u53ef\u4ee5\u662f\u7c7b\u578b\u53d8\u91cf\u6216\u8005\u5bf9\u8c61\u6216\u8005\u6570\u7ec4.<code>@Prop<\/code>\u63a5\u53d7\u7684\u7c7b\u578b\u6bd4\u5982<code>Number<\/code>\u662f<code>JavaScript<\/code>\u7684\u7c7b\u578b,\u4e4b\u540e\u5b9a\u4e49\u7684\u5c5e\u6027\u7c7b\u578b\u5219\u662f<code>TypeScript<\/code>\u7684\u7c7b\u578b.<\/li>\n<\/ul>\n<hr \/>\n<h4>Mixins<\/h4>\n<p>\u5728\u4f7f\u7528<code>Vue<\/code>\u8fdb\u884c\u5f00\u53d1\u65f6\u6211\u4eec\u7ecf\u5e38\u8981\u7528\u5230\u6df7\u5408,\u7ed3\u5408<code>TypeScript<\/code>\u4e4b\u540e\u6211\u4eec\u6709\u4e24\u79cd<code>mixins<\/code>\u7684\u65b9\u6cd5.<\/p>\n<p>\u4e00\u79cd\u662f<code>vue-class-component<\/code>\u63d0\u4f9b\u7684.<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-jsx\" lang=\"jsx\">\/\/\u5b9a\u4e49\u8981\u6df7\u5408\u7684\u7c7b mixins.ts\r\nimport Vue from 'vue';\r\nimport  Component  from 'vue-class-component';\r\n\r\n@Component  \/\/ \u4e00\u5b9a\u8981\u7528Component\u4fee\u9970\r\nexport default class myMixins extends Vue {\r\n    value: string = \"Hello\"\r\n}\r\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-jsx\" lang=\"jsx\">\/\/ \u5f15\u5165\r\nimport  Component  {mixins}  from 'vue-class-component';\r\nimport myMixins from 'mixins.ts';\r\n\r\n@Component\r\nexport class myComponent extends mixins(myMixins) {\r\n                          \/\/ \u76f4\u63a5extends myMinxins \u4e5f\u53ef\u4ee5\u6b63\u5e38\u8fd0\u884c\r\n      created(){\r\n          console.log(this.value) \/\/ =&gt; Hello\r\n    }\r\n}\r\n<\/code><\/pre>\n<p>\u7b2c\u4e8c\u79cd\u65b9\u5f0f\u662f\u5728<code>@Component<\/code>\u4e2d\u6df7\u5165.<\/p>\n<p>\u6211\u4eec\u6539\u9020\u4e00\u4e0b<code>mixins.ts<\/code>,\u5b9a\u4e49<code>vue\/type\/vue<\/code>\u6a21\u5757,\u5b9e\u73b0<code>Vue<\/code>\u63a5\u53e3<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-tsx\" lang=\"tsx\">\/\/ mixins.ts\r\nimport { Vue, Component } from 'vue-property-decorator';\r\n\r\n\r\ndeclare module 'vue\/types\/vue' {\r\n    interface Vue {\r\n        value: string;\r\n    }\r\n}\r\n\r\n@Component\r\nexport default class myMixins extends Vue {\r\n    value: string = 'Hello'\r\n}\r\n<\/code><\/pre>\n<p>\u6df7\u5165<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-jsx\" lang=\"jsx\">import { Vue, Component, Prop } from 'vue-property-decorator';\r\nimport myMixins from '@static\/js\/mixins';\r\n\r\n@Component({\r\n    mixins: [myMixins]\r\n})\r\nexport default class myComponent extends Vue{\r\n    created(){\r\n        console.log(this.value) \/\/ =&gt; Hello\r\n    }\r\n}\r\n<\/code><\/pre>\n<ul>\n<li>\u603b\u7ed3: \u4e24\u79cd\u65b9\u5f0f\u4e0d\u540c\u7684\u662f\u5728\u5b9a\u4e49<code>mixins<\/code>\u65f6\u5982\u679c\u6ca1\u6709\u5b9a\u4e49<code>vue\/type\/vue<\/code>\u6a21\u5757, \u90a3\u4e48\u5728\u6df7\u5165\u7684\u65f6\u5019\u5c31\u8981<code>\u7ee7\u627f<\/code>\u8be5<code>mixins<\/code>; \u5982\u679c\u5b9a\u4e49<code>vue\/type\/vue<\/code>\u6a21\u5757,\u5728\u6df7\u5165\u65f6\u53ef\u4ee5\u5728<code>@Component<\/code>\u4e2d<code>mixins<\/code>\u76f4\u63a5\u6df7\u5165.<\/li>\n<\/ul>\n<hr \/>\n<h4>@Model<\/h4>\n<p><code>Vue<\/code>\u7ec4\u4ef6\u63d0\u4f9b<code>model<\/code>: <code>{prop?: string, event?: string}<\/code>\u8ba9\u6211\u4eec\u53ef\u4ee5\u5b9a\u5236<code>prop<\/code>\u548c<code>event<\/code>.<br \/>\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u4e00\u4e2a\u7ec4\u4ef6\u4e0a\u7684<code>v-model<\/code> \u4f1a\u628a <code>value<\/code>\u7528\u4f5c <code>prop<\/code>\u4e14\u628a <code>input<\/code>\u7528\u4f5c <code>event<\/code>\uff0c\u4f46\u662f\u4e00\u4e9b\u8f93\u5165\u7c7b\u578b\u6bd4\u5982\u5355\u9009\u6846\u548c\u590d\u9009\u6846\u6309\u94ae\u53ef\u80fd\u60f3\u4f7f\u7528 <code>value prop<\/code>\u6765\u8fbe\u5230\u4e0d\u540c\u7684\u76ee\u7684\u3002\u4f7f\u7528<code>model<\/code>\u9009\u9879\u53ef\u4ee5\u56de\u907f\u8fd9\u4e9b\u60c5\u51b5\u4ea7\u751f\u7684\u51b2\u7a81\u3002<\/p>\n<ul>\n<li>\u4e0b\u9762\u662f<code>Vue<\/code>\u5b98\u7f51\u7684\u4f8b\u5b50<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-csharp\" lang=\"csharp\">Vue.component('my-checkbox', {\r\n  model: {\r\n    prop: 'checked',\r\n    event: 'change'\r\n  },\r\n  props: {\r\n    \/\/ this allows using the `value` prop for a different purpose\r\n    value: String,\r\n    \/\/ use `checked` as the prop which take the place of `value`\r\n    checked: {\r\n      type: Number,\r\n      default: 0\r\n    }\r\n  },\r\n  \/\/ ...\r\n})\r\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-xml\" lang=\"xml\">&lt;my-checkbox v-model=\"foo\" value=\"some value\"&gt;&lt;\/my-checkbox&gt;\r\n<\/code><\/pre>\n<p>\u4e0a\u8ff0\u4ee3\u7801\u76f8\u5f53\u4e8e\uff1a<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-csharp\" lang=\"csharp\">&lt;my-checkbox\r\n  :checked=\"foo\"\r\n  @change=\"val =&gt; { foo = val }\"\r\n  value=\"some value\"&gt;\r\n&lt;\/my-checkbox&gt;\r\n<\/code><\/pre>\n<p>\u5373<code>foo<\/code>\u53cc\u5411\u7ed1\u5b9a\u7684\u662f\u7ec4\u4ef6\u7684<code>checke<\/code>, \u89e6\u53d1\u53cc\u5411\u7ed1\u5b9a\u6570\u503c\u7684\u4e8b\u4ef6\u662f<code>change<\/code><\/p>\n<p>\u4f7f\u7528<code>vue-property-decorator<\/code>\u63d0\u4f9b\u7684<code>@Model<\/code>\u6539\u9020\u4e0a\u9762\u7684\u4f8b\u5b50.<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"language-tsx\" lang=\"tsx\">import { Vue, Component, Model} from 'vue-property-decorator';\r\n\r\n@Component\r\nexport class myCheck extends Vue{\r\n   @Model ('change', {type: Boolean})  checked!: boolean;\r\n}\r\n<\/code><\/pre>\n<ul>\n<li>\u603b\u7ed3, <code>@Model()<\/code>\u63a5\u6536\u4e24\u4e2a\u53c2\u6570, \u7b2c\u4e00\u4e2a\u662f<code>event<\/code>\u503c, \u7b2c\u4e8c\u4e2a\u662f<code>prop<\/code>\u7684\u7c7b\u578b\u8bf4\u660e, \u4e0e<code>@Prop<\/code>\u7c7b\u4f3c, \u8fd9\u91cc\u7684\u7c7b\u578b\u8981\u7528<code>JS<\/code>\u7684. \u540e\u9762\u5728\u63a5\u7740\u662f<code>prop<\/code>\u548c\u5728<code>TS<\/code>\u4e0b\u7684\u7c7b\u578b\u8bf4\u660e.<\/li>\n<\/ul>\n<hr \/>\n<p>\u6682\u65f6\u5e38\u7528\u7684\u5c31\u8fd9\u51e0\u4e2a,\u8fd8\u6709<code>@Provice<\/code>\u548c<code>@Inject<\/code>\u7b49\u7528\u5230\u4e86\u518d\u5199.<\/p>\n<p>\u53c2\u8003: <a class=\"url\" href=\"https:\/\/juejin.im\/post\/5d31907a51882557af271be2#heading-0\" target=\"_blank\">https:\/\/juejin.im\/post\/5d31907a51882557af271be2#heading-0<\/a><\/p>\n<p>\u94fe\u63a5\uff1a<a class=\"url\" href=\"https:\/\/www.jianshu.com\/p\/d8ed3aa76e9b\" target=\"_blank\">https:\/\/www.jianshu.com\/p\/d8ed3aa76e9b<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>vue-property-decorator \u8fd9\u4e2a\u7ec4\u4ef6\u5b8c\u5168\u4f9d\u8d56\u4e8evue-class-component.\u5b83\u5177\u5907 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[121,106,105],"tags":[],"_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":1,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2912\/revisions"}],"predecessor-version":[{"id":2913,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2912\/revisions\/2913"}],"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}]}}