前情回顧：

vue-element-admin項(xiàng)目學(xué)習(xí)筆記（1）安裝、配置、啟動(dòng)項(xiàng)目
vue-element-admin項(xiàng)目學(xué)習(xí)筆記（2）main.js
文件分析
vue-element-admin項(xiàng)目學(xué)習(xí)筆記（3）路由分析一:靜態(tài)路由
vue-element-admin項(xiàng)目學(xué)習(xí)筆記（4）路由分析二:動(dòng)態(tài)路由及permission.js
vue-element-admin項(xiàng)目學(xué)習(xí)筆記（5）路由分析三:動(dòng)態(tài)路由匹配邏輯
Vue-Element-Admin項(xiàng)目學(xué)習(xí)筆記（6）Vuex狀態(tài)管理
Vue-Element-Admin項(xiàng)目學(xué)習(xí)筆記（7）用Node.js寫一個(gè)簡單后端接口
Vue-Element-Admin項(xiàng)目學(xué)習(xí)筆記（8）配置表單校驗(yàn)規(guī)則

1、需求分析

我們需要一個(gè)添加學(xué)生的功能，在功能中，有一個(gè)選擇專業(yè)的下拉框：

該組件的下拉框內(nèi)容，是我們通過后端接口動(dòng)態(tài)獲取的
且，改下拉框，很可能在其他頁面中，也要應(yīng)用到
所以，我們需要把它封裝一個(gè)獨(dú)立的組件。
這里就涉及到了，父子組件間通信的問題。

我們先回顧一下，我們學(xué)過的，vue父子通信的幾種實(shí)現(xiàn)（不說vuex）了

2、父子組件通信回顧

這里不包括vuex

寫了兩篇父子間通信筆記，需要的小伙伴，可以自行回顧一下。

• vue組件通信簡明筆記：父傳子

• vue組件通信簡明筆記：子傳父

3、組件拆分

• 拆分前：

...
    
    <el-row style="margin-top: 30px;">
      <el-col :span="24">
        <el-form-item label="所選專業(yè)" 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="所選專業(yè)" prop="zy">
        
          <!--  拆分后的組件 -->
          <select-zhuan v-model="stuForm.zy"/>
          
       </el-form-item>
      </el-col>
    </el-row> 

...

4、組件通信

組件通信過程是：

1. 父組件把用戶點(diǎn)擊的項(xiàng)目傳給子組件：父組件利用v-model方法，把用戶選定值通過prop給到子組件

2. 子組件接收父組件傳來的數(shù)值：

   • 子組件通過props得到數(shù)據(jù)

     props:{
         value:{
             type:String,
             default:''
         }
     },
     ...
         data() {
     return {
     options: [{
       value: 'python',
       label: 'python'
     }, {
       value: 'c',
       label: 'C語言'
     }, {
       value: 'java',
       label: 'java開發(fā)'
     }, {
       value: 'vue',
       label: 'vue前端'
     }, {
       value: 'mysql',
       label: 'MySQL數(shù)據(jù)庫'
     }],
     zy:this.value //避免直接修改props
     
     }
     

   }
   ```

3. 子組件將數(shù)據(jù)傳給父組件

   • <el-select v-model="zy" placeholder="請選擇" @change="$emit('input',$event)">
   • 在觸發(fā)change事件的時(shí)候，使用$emit('input',$event)將值傳給父組件
   • 父組件v-model接收到數(shù)據(jù)

4. 父組件收集到子組件的傳值，用于提交文章來源地址http://www.zghlxwxcb.cn/news/detail-513333.html

   • …略

到了這里，關(guān)于Vue-Element-Admin項(xiàng)目學(xué)習(xí)筆記（9）表單組件封裝，父子組件雙向通信的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！