完善 Vue + TypeScript 自定义 Component

加入 CSS

  1. 安装 css-loadernpm i -D css-loader
  2. 直接在 TodoItem.vue 文件中添加 style 标签块即可:

将整个 App 使用 .vue 文件包装。

app.ts 修改如下:

import Vue from "vue"
import TodoApp from "./TodoApp.vue"
const app = new Vue({ 
  el: '#app',
  render: f => f(TodoApp)
 })

注意其中 render 的参数是: (createElement: () => VNode) => VNode
并且注意,render 函数的优先级比 template 等指定自定义渲染内容的优先级高。

支持删除 Todo

  1. TodoItem.vue 模板处添加删除按钮。

  2. TodoItem.vue 脚本中添加处理方法。

  deleteTodo():void{
    this.$emit('deleteTodo')
  }

主要是通过 $emit 事件来发送事件通知。

  1. 父组件注册 TodoItem.vue 发送的事件处理器。
    即 使用 @deleteTodo="deleteTodo(index)" 来注册。为了方便删除对应的 todo 项,需要使用 v-for 来得到对应的 index
       

也就是说父组件可以直接在使用时通过 v-on 指令注册事件处理函数。

你可能感兴趣的:(完善 Vue + TypeScript 自定义 Component)