Vue-Element-Admin项目学习笔记（9）表单组件封装，父子组件双向通信

前情回顾：

vue-element-admin项目学习笔记（1）安装、配置、启动项目
vue-element-admin项目学习笔记（2）main.js
文件分析
vue-element-admin项目学习笔记（3）路由分析一:静态路由
vue-element-admin项目学习笔记（4）路由分析二:动态路由及permission.js
vue-element-admin项目学习笔记（5）路由分析三:动态路由匹配逻辑
Vue-Element-Admin项目学习笔记（6）Vuex状态管理
Vue-Element-Admin项目学习笔记（7）用Node.js写一个简单后端接口
Vue-Element-Admin项目学习笔记（8）配置表单校验规则

1、需求分析

我们需要一个添加学生的功能，在功能中，有一个选择专业的下拉框：

该组件的下拉框内容，是我们通过后端接口动态获取的
且，改下拉框，很可能在其他页面中，也要应用到
所以，我们需要把它封装一个独立的组件。
这里就涉及到了，父子组件间通信的问题。

我们先回顾一下，我们学过的，vue父子通信的几种实现（不说vuex）了

2、父子组件通信回顾

这里不包括vuex

写了两篇父子间通信笔记，需要的小伙伴，可以自行回顾一下。

• vue组件通信简明笔记：父传子

• vue组件通信简明笔记：子传父

3、组件拆分

• 拆分前：

...
    
    <el-row style="margin-top: 30px;">
      <el-col :span="24">
        <el-form-item label="所选专业" prop="zy">
        
          <!--  拆分前 的下拉框 -->
 
            <el-select v-model="zy" placeholder="请选择" @change="$emit('input',$event)">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
          
       </el-form-item>
      </el-col>
    </el-row> 

...

• 拆分后：

...
    
    <el-row style="margin-top: 30px;">
      <el-col :span="24">
        <el-form-item label="所选专业" prop="zy">
        
          <!--  拆分后的组件 -->
          <select-zhuan v-model="stuForm.zy"/>
          
       </el-form-item>
      </el-col>
    </el-row> 

...

4、组件通信

组件通信过程是：

1. 父组件把用户点击的项目传给子组件：父组件利用v-model方法，把用户选定值通过prop给到子组件

2. 子组件接收父组件传来的数值：

   • 子组件通过props得到数据

     props:{
         value:{
             type:String,
             default:''
         }
     },
     ...
         data() {
     return {
     options: [{
       value: 'python',
       label: 'python'
     }, {
       value: 'c',
       label: 'C语言'
     }, {
       value: 'java',
       label: 'java开发'
     }, {
       value: 'vue',
       label: 'vue前端'
     }, {
       value: 'mysql',
       label: 'MySQL数据库'
     }],
     zy:this.value //避免直接修改props
     
     }
     

   }
   ```

3. 子组件将数据传给父组件

   • <el-select v-model="zy" placeholder="请选择" @change="$emit('input',$event)">
   • 在触发change事件的时候，使用$emit('input',$event)将值传给父组件
   • 父组件v-model接收到数据

4. 父组件收集到子组件的传值，用于提交

   • …略