一、目标

• 能够知道如何对props进行验证
• 能够知道如何使用计算属性
• 能够知道如何为组件自定义事件
• 能够知道如何在组件上使用v-model

二、目录

• props验证
• 计算属性
• 自定义事件
• 组件上的v-model
• 任务列表案例

props验证

---

1.什么是props验证

指的是：在封装组件时对外界传递过来的props数据进行合法性的校验，从而防止数据不合法的问题。

使用数组类型的props节点的缺点：无法每个prop指定具体的数据类型 

2.对象类型的props节点

使用对象类型的props节点，可以对每个prop进行数据类型的校验，示意图如下：

 3.props验证

对象类型的props节点提供了多种数据验证方案，例如：

①基础的类型检查

②多个可能的类型

③必填项校验

④属性默认值

⑤自定义验证函数

3.1基础的类型检查

可以直接为组件的prop属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据：

 3.2 多个可能的类型

如果某个prop属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型，示例代码如下：

3.3必填项校验

如果组件的某个prop属性是必填项，必须让组件的使用者为其传递属性的值。此时，可以通过如下的方式将其设置为必填项： 

3.4属性默认值

在封装组件时，可以为某个prop属性指定默认值。示例代码如下： 

 3.5自定义验证函数

在封装组件时，可以为prop属性指定自定义的验证函数，从而对prop属性的值进行更加精确的控制：

 计算属性

---

1.什么是计算属性

计算属性本质上就是一个function函数，它可以实时监听data中数据的变化，并return一个计算后的新值，供组件渲染DOM时使用。

2.如何声明计算属性

计算属性需要以function函数的形式声明到组件的computed选项中，示例代码如下：

 注意：计算属性侧重于得到一个计算的结果，因此计算属性中必须有return返回值！

3.计算属性的使用注意点

①计算属性必须定义在computed节点中

②计算属性必须是一个function函数

③计算属性必须有返回值

④计算属性必须当做普通属性使用

4.计算属性vs方法

相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。因此，计算属性的性能更好：

 5.计算属性案例

 案例需求，使用计算属性动态计算：

①已勾选的商品总个数

②已勾选的商品总价

③结算按钮的禁用状态

自定义事件

---

1.什么是自定义事件

在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。

 2.自定义事件的3个使用步骤

在封装组件时：

①声明自定义事件

②触发自定义事件

在使用组件时：

③@监听自定义事件

2.1声明自定义事件

开发者为自定义组件封装的自定义事件，必须事先在emlts节点中声明，示例代码如下：

2.2触发自定义事件

在emits节点下声明的自定义事件，可以通过 this.$emit('自定义事件的名称')  方法进行触发，示例代码如下：

 2.3监听自定义事件

在使用自定义的组件时，可以通过v-on的形式监听自定义事件。示例代码如下：

 3.自定义事件传参

在调用this.$emit()方法触发自定义事件时，可以通过第2个参数为自定义事件传参，示例代码如下：

组件上的v-model

---

1.为什么需要在组件上使用v-model

v-model是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用v-model指令。示意图如下：

 2.在组件上使用v-model的步骤

①父组件->子组件传递数据

①父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件

②子组件中，通过props接收父组件传递过来的数据

<template>
  <div>
    <h1>App根组件-----{{ count }}</h1>
    <button @click="count+=1">+1</button>
    <my-counter :number="count"></my-counter>
  </div>
</template>

<script>
import MyCounter from './Counter.vue'
export default {
    name:'MyApp',
    data(){
        return{
            count:0
        }
    },
    components:{
        'my-counter':MyCounter
    }
}
</script>

<template>
  <div>
  <p>count值是:{{ number }}</p>
  </div>
</template>

<script>

export default {
    name:'MyCounter',
    props:['number'],
    data(){
        return{
            
        }
    }
}
</script>

②子组件->父组件传递数据

 ①在v-bind：指令之前添加v-model指令

②在子组件中声明emits自定义事件，格式为updata:xxx

③调用$emit()触发自定义事件，更新父组件中的数据

App.vue

<template>
  <div>
    <h1>App根组件-----{{ count }}</h1>
    <button @click="count+=1">+1</button>
    <my-counter v-model:number="count"></my-counter>
  </div>
</template>

<script>
import MyCounter from './Counter.vue'
export default {
    name:'MyApp',
    data(){
        return{
            count:0
        }
    },
    components:{
        'my-counter':MyCounter
    }
}
</script>

Counter.vue

<template>
  <div>
  <p>count值是:{{ number }}</p>
  <button @click="add">+1</button>
  </div>
</template>

<script>

export default {
    name:'MyCounter',
    props:['number'],
    data(){
        return{
            
        }
    },
    emits:['update:number'],
    methods:{
        add(){
            this.$emit('update:number',this.number+1)
        }
    }
}
</script>

任务列表案例

---

1.案例效果

 2.用到的知识点

①vite创建项目

②组件的封装与注册

③props

④样式绑定

⑤计算属性

⑥自定义事件

⑦组件上的v-model

3.整体的实现步骤

 ①使用vite初始化项目

②梳理项目结构

③封装tido-list组件

④封装todo-input组件

⑤封装todo-button组件

 

 

 

 

 bootstrap:List group · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网 (bootcss.com)

 

  

 

  

 

 

 

 

 

 

 

 App.vue:

<template>
  <div>
  <h1>App根组件</h1>
  <TodoInput @add="onAddNewTask"></TodoInput>
  <TodoList :list="tasklist" class="mt-2"></TodoList>
  <TodoButton v-model:active="activeBtnIndex"></TodoButton>
  </div>
</template>

<script>
import TodoList from './components/todo-list.vue'
import TodoInput from './components/todo-input.vue'
import TodoButton from './components/todo-button.vue'
export default {
  name: 'MyApp',
  methods:{onAddNewTask(taskname){
    this.todolist.push({
      id:this.nextId,
      tast:taskname,
      done:false
    })
    this.nextId++
  }},
  data(){
    return{
      todolist:[
        {id:1,tast:'周一早晨9点开会',done:false},
        {id:2,tast:'周一晚上8点聚餐',done:false},
        {id:3,tast:'周二早晨起不来',done:true},
        {id:4,tast:'周三早晨更起不来',done:true},
      ],
      //下一个可用的id
      nextId:4,
      activeBtnIndex:0
     
    }
  },
  computed:{
    tasklist(){
      switch(this.activeBtnIndex){
        case 0:
          return this.todolist
          case 1:
          return this.todolist.filter(x=>x.done===true)
          case 2:
          return this.todolist.filter(x=>x.done!==true)
      }
    }
  },
  components: {
    'TodoList':TodoList,
    'TodoInput':TodoInput,
    'TodoButton':TodoButton
  }
}
</script>
<style lang="less">

</style>

 todo-button.vue:

<template>
  <div class="mt-3 btn-container">
    <div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn" :class="active===0?'btn-primary':'btn-secondary'" @click="onBtnClick(0)">全部</button>
  <button type="button" class="btn" :class="active===1?'btn-primary':'btn-secondary'"  @click="onBtnClick(1)">已完成</button>
  <button type="button" class="btn" :class="active===2?'btn-primary':'btn-secondary'"  @click="onBtnClick(2)">未完成</button>
</div>
  </div>
</template>

<script>
export default {
    name:'TodoButton',
    emits:['update:active'],
    props:{
        active:{
        type:Number,
        required:true,
        default:0
    }
    },
    methods:{
        onBtnClick(index){
    if(index===this.active) return
    this.$emit("update:active",index)
        }
    }
}
</script>

<style lang="less" scoped>
.btn-container{
    width: 400px;
    text-align: center;
}
</style>

 todo-input.vue:

<template>
  <div>
    <form class="form-inline hh" @submit.prevent="onFormSubmit">
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">任务</div>
    </div>
    <input type="text" class="form-control"  placeholder="请输入任务信息：" style="width: 356px;" v-model.trim="taskname">
  </div>
  <button type="submit" class="btn btn-primary mb-2">添加新任务</button>
</form>
  </div>
</template>

<script>
export default {
    name:'TodoInput',
    emits:['add'],
    data(){
        return{
            taskname:''
        }
    },
    methods:{
        //表单的提交事件处理函数
        onFormSubmit(){
        if(!this.taskname) return alert('任务名称不能为空！')
        this.$emit('add',this.taskname)
        this.taskname=''

        }
    }
}
</script>

<style lang="less" scoped>

</style>

todo-list.vue:

<template>
  <div>
    <ul class="list-group">
        <!-- 列表组 -->
  <li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
    <!-- 复选框 -->
    <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.done"/>
    <label class="custom-control-label" :for="item.id" :class="item.done?'delete':''">{{ item.tast }}</label>
    </div>
    <!-- 徽标 -->
    <span class="badge badge-success badge-pill" v-if="item.done">完成</span>
    <span class="badge badge-warning badge-pill" v-else>未完成</span>
  </li>
</ul>
  </div>
</template>

<script>
export default {
    neme:'TodoList',
    props:{
        list:{
            type:Array,
            required:true,
            default:[]
        }
    }

}
</script>

<style lang="less">
.list-group{
    width: 400px;
.list-group-item{
    height:60px;
}
}
.delete{
    text-decoration: line-through;
    color: grey;
    font-style: italic;
}

</style>

index.html:

<template>
  <div>
    <ul class="list-group">
        <!-- 列表组 -->
  <li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
    <!-- 复选框 -->
    <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.done"/>
    <label class="custom-control-label" :for="item.id" :class="item.done?'delete':''">{{ item.tast }}</label>
    </div>
    <!-- 徽标 -->
    <span class="badge badge-success badge-pill" v-if="item.done">完成</span>
    <span class="badge badge-warning badge-pill" v-else>未完成</span>
  </li>
</ul>
  </div>
</template>

<script>
export default {
    neme:'TodoList',
    props:{
        list:{
            type:Array,
            required:true,
            default:[]
        }
    }

}
</script>

<style lang="less">
.list-group{
    width: 400px;
.list-group-item{
    height:60px;
}
}
.delete{
    text-decoration: line-through;
    color: grey;
    font-style: italic;
}

</style>

总结

---

①能够知道如何对props进行验证

• 数组格式、对象格式
• type、default、required、validator

②能够知道如何使用计算属性

• computed节点、必须return一个结果、缓存计算结果

③能够知道如何为组件绑定自定义事件

• v-on绑定自定义事件、emits、$emit（）

④能够知道如何在组件上使用v-model

• 应用场景：实现组件内外的数据同步
• v-model:props名称、emits、$emit（‘update:props名称’）