Vue+Type ScriptカスタムComponent

3129 ワード

前述の文章では,Vue+Type Scriptを用いて簡単なToDo Demoを実現した.実はこのDemoではカスタムComponentが使われています.次のようになります.

@Component
class App extends Vue{ }

これは一般的にアプリケーションのルートコンポーネントとして使用されます.以下では、Vueのコンポーネントシステムと単一ファイルコンポーネントについてより具体的に説明します.

取付vue-loader$npm install -D vue-loader

webpack.config.jsのmodule.rulesには、{ test: /\.vue$/, loader: 'vue-loader' }

という規則宣言が追加されています.

は、vue-property-decorator、$npm i -S vue-property-decoratorを取り付ける、tsconfigのemitDecoratorMetadataオプションをtrue

に設定する.

取付vue-template-compiler,$npm i -D vue-template-compiler

は、TSがvue-shims.d.ts接尾辞の単一ファイルモジュールを識別するために、.vue宣言ファイルを作成する.内容は以下の通り:

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

Todoクラスをmodels.tsファイルに単独で配置する.

export default class Todo{
    content: string
    created: Date
    done = false 
  
    constructor(content:string){
      this.content = content
      this.created = new Date()
    }

 }

単一ファイルモジュールTodoItem.vueを作成し、内容は以下の通りである:



import Vue from "vue"
import Component from "vue-class-component"
import { Prop } from "vue-property-decorator"
import Todo from "./Todo"

@Component
export default class TodoItem extends Vue {
  @Prop() todo:Todo

  markDone():void{
    this.todo.done = true
  }

  markTodo():void{
    this.todo.done = false
  }
}

注意scriptラベルにlang="ts"プロパティを追加する必要があります.

app.tsを次のように変更します:

import Vue from "vue"
import Component from "vue-class-component"
import TodoItem from "./TodoItem.vue"
import Todo from "./Todo"


@Component
class App extends Vue{
  newTodoText = ''
  todos :Array = [new Todo("   Vue")]
  hideCompletedTodos = false
  visitCount = 0
  error:any = null

  create():void{
    const content = this.newTodoText.trim()
    if(content.length  < 1){
      this.error = "        "
      return
    }
    const todo = new Todo(content)
    this.todos.push(todo)
    this.newTodoText = ""
  }

  clearError():void{
    this.error = null
  }
}

const app = new App({ el: '#app',
  components: {
    'todo-item': TodoItem
  }
})

index.htmlのulのラベルをバインドし、次のように変更します.

完全なコードは、https://github.com/banxi1988/VueToDoDemo.gitラベルstep7を参照してください.

Vuexクイックスタート

C++オブジェクト向け高度プログラミング(上)2019-07-21