vue的組件化運用（數據在兩個組件互傳，小問題總結）

一、vue的組件化應用

　　首先，知道有哪些相關的屬性需要用到，再慢慢去理解，運用。

　　1.兩個vue頁面

　　2. slot占位符（可用可不用）

　　3.props內置屬性

　　4.watch監聽函數

　　5.import導入vue的功能

　　6.data的return里需要返回值需要放進去，如 data: ' ' 就行了

　　第一步，寫好兩個vue頁面，我這里寫的是dialog（對話框）的彈框運用

(1)子組件(dialog)基本代碼如下

　　

<template>
  <el-dialog title="編輯規格" :visible.sync="sizeedit" @close="closingedit" width="30%">

　　<el-form :model="form" ref="form" label-width="80px" :rules="rules">

  　　　　<el-form-item label="規格名稱" prop="name">
    　　　　<el-input v-model="form.name" autocomplete="off"></el-input>
  　　　　</el-form-item>

　　　　</el-form>

 　　<div slot="footer" class="dialog-footer">

　　　　　　<el-button type="warning" size="small" @click="reset('form')">重置</el-button>
　　　　　　<el-button type="danger" size="small" @click="close">取消</el-button>
　　　　　　<el-button type="primary" size="small" @click="save('form')">保存</el-button>
　　　</div> 
　</el-dialog>
</template>

data里

form: {}

 

sizeedit: false,

methods里

 　　close () {
      this.$emit('close-sizeedit', true)
    },
    reset () {
      this.$refs.form.resetFields()
    },
    closingedit () {
      this.$emit('close-sizeedit', true)
    },

(2)父組件中

需要傳遞的值為id,通過函數傳遞id

handleEdit (id) {
      console.log(id)
      this.editId = id
      this.sizeeditVisible = true
      console.log(this.sizeeditVisible)
    },

所以交流的值是editId

(3)兩個頁面基本完成的情況下，第一步，導入子組件，並且綁定傳遞的參數

import sizeedit from './sizeedit'

 components: {
    sizeedit
  }

<sizeedit 
:sizeedit-visible="sizeeditVisible" 
@close-sizeedit="sizeeditVisible = false" 
:edit-id="editId"/>

父組件，data里

editId: ''，

sizeeditVisible: false,

子組件，要開始添加內置屬性props和watch監聽參數的變化，然后執行函數

 props: {
    'sizeeditVisible': Boolean,
    'editId': String
  }

watch: {
    sizeeditVisible () {
      this.sizeedit = this.sizeeditVisible
      this.showEdit()
    }
  }

methods里

 showEdit () {
      console.log(this.editId)
      let formData = new FormData()
      formData.append('id', this.editId)
      let config = {headers: {'Content-Type': 'multipart/form-data'}}
      this.$http.post('/psi/base/edit', formData, config).then(res => {
        console.log(this.form)
        this.form.name = res.data.data.name
      })
    }

那么，基本只要父組件的id是確實在變化而且不是undefined【一般都是輸入框變化的值】（判斷方法，在相應函數下，console.log（id）），那么form里的規格名稱就會改變。

組件套用，參數（String,Boolean）傳遞基本完成。

二、小問題總結

需要注意的幾個小問題

1.關於form的

-1 this.$refs.form.resetFields()  是清空form數據的函數，但是前提，你的form屬性不能少,form-item里props一定要有

-2 一定要有v-model屬性，如文中的v-model = "form.name"

-3 在data里的數據，form需要幫name占位，這樣子，你傳遞的值才會放進來

form: { name: '' }
            

2.關於子父組件的

-1 綁定數據時，一定要注意，父組件里需要定義editId，在data設置為空就行（注意在父組件用console.log檢測是否id有值）

-2 子組件里，要有props和watch，用來監聽你的值發生變化，從而相應做出動作

-3 在父組件引用子組件時，要記得用import導入，而且在components組件里，導入那個標簽，從而才能在父組件的vue頁面里放子組件的大標簽

-4 注意傳遞的數據，在引用子組件標簽時，綁定editId

3.關於敲代碼找錯的

-1 遇到問題，看控制台，點擊右鍵，檢查，然后在console里看是什么錯

-2 如果console里沒有報紅，而又確實沒有數據，那你就要考慮是函數功能並沒有被調用，還是你沒有把數據放進去，導致調用了也是空值

-3 學會找到出錯的地方，比如你想實現那個功能，但是點擊發現並沒有發生函數功能，那么你就需要檢查函數，以及相關的綁定值，多打打console.log，看是否都有值。

暫時這篇文章涉及到的就是String和Boolean類型的傳值，晚點看下下次有沒有空，再添加一下form的傳遞，就是Object，會比較蛋疼，但是和這里的寫法是不一樣的。

前端實習滿3個月，vue邊學邊用1個半月，還不錯，加油繼續肝，有沒有大神有其他前端的知識推薦我去看一下，或者說我自己最近抽點時間看下紅客的知識，還有想要學服務器部署環境，將項目發布到自己域名上，榨油。