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

这篇具有很好参考价值的文章主要介绍了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-Element-Admin项目学习笔记（9）表单组件封装，父子组件双向通信
该组件的下拉框内容，是我们通过后端接口动态获取的
且，改下拉框，很可能在其他页面中，也要应用到
所以，我们需要把它封装一个独立的组件。
这里就涉及到了，父子组件间通信的问题。

我们先回顾一下，我们学过的，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、组件通信

组件通信过程是：

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

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

子组件通过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

}

}
```

子组件将数据传给父组件
- <el-select v-model="zy" placeholder="请选择" @change="$emit('input',$event)">
- 在触发change事件的时候，使用$emit('input',$event)将值传给父组件
- 父组件v-model接收到数据
父组件收集到子组件的传值，用于提交文章来源地址https://www.toymoban.com/news/detail-513333.html
- …略