组件化编码流程案例
组件化编码流程
- 实现静态组件:抽取组件,使用组件实现静态页面效果
- 展示动态数据
- 数据的类型、名称是什么
- 数据保存在哪个组件里
- 交互——从绑定事件监听开始
一个data或者函数等…一个组件在用放在组件自身即可,一些组件在用放在他们共同的父组件上(状态提升)
组件的自定义事件
- 一种组件间通信方式,适用于子组件===>父组件
- 在父组件中给子组件绑定了自定义事件,子组件触发自定义事件。
- 组件上绑定的事件默认为自定义事件,如果要绑定原生DOM事件那么需要使用native修饰符
- 如果只想让事件触发一次那么可以使用once修饰符或$once方法
- 通过
this.$refs.xxx.$on
('自定义事件名’回调函数)绑定自定义事件的时候回调函数要使用箭头函数或者是配置在methods中,这样this才能指向APP,否则this指向xxx
绑定自定义事件
第一种绑定方法
<Student @sendMsg=“getStudentName”/>
- 当触发了sendMsg事件之后直接执getStudentName回调函数
- 在Student组件中通过
this.$emits.('sendMsg',this.name)
触发该事件并且把name作为参数传递给回调函数getStudentName
APP.vue
<template>
<div>
<h2>{
{msg}},{
{StuName}}</h2>
<School @getSchoolName.once="getSchoolName"/>
<Student ref="student"/>
</div>
</template>
<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {