個人 Vue.js 學習日記（十一） - 父子組件間的互相傳值

時間 2019-11-08

標籤個人 vue.js vue 學習日記十一父子組件互相欄目 JavaScript 简体版

原文原文鏈接

上節回顧

上節我用element-ui 與 vue-router 實現了頁面跳轉的功能。vue

回想一下，vue-router實現組件之間的切換關鍵也就倆東西，一個router-link一個router-view，因此說整體來講上一節也沒學啥。vue-router

本節目標

props父組件向子組件傳值element-ui

$emit子組件向父組件傳值ui

基於上一節的例子，腦子裏構思了一個點擊table的row，彈出框顯示本行信息這樣一個畫面this

1.建立表單彈出框

要點：spa

props: ['student']告訴父組件我（彈出框組件）須要一個student
this.$emit('confirm', this.form)觸發父組件中，彈出框組件上定義的confirm事件，並將this.form傳遞過去

student-list-info組件完整代碼：3d

<template>
  <div>
    <el-button icon="el-icon-more" @click="dialogFormVisible = true" circle></el-button>
    <el-dialog title="查詢" :visible.sync="dialogFormVisible">
      <el-form :model="student">
        <el-form-item label="姓名">
          <el-input v-model="student.name"></el-input>
        </el-form-item>
        <el-form-item label="性別">
          <el-input v-model="student.sex"></el-input>
        </el-form-item>
        <el-form-item label="年齡">
          <el-input v-model.number="student.age" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doConfirm(student)">確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'student-list-info',
  props: ['student'],
  data () {
    return {
      dialogFormVisible: false
    }
  },
  methods: {
    doConfirm (student) {
      this.$emit('confirm', student)
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>

</style>

2.將彈出框引入List頁面

student-list頁面須要注意的只有這裏：
<student-list-info style="float: left" @confirm="onConfirm" :student="this.student"></student-list-info>code

:student：中的student對應props: ['student']中的studentcomponent

@confirm：@後面的confirm對應this.$emit('confirm', this.form)中的confirmorm

完整代碼：

<template>
  <div>
    <el-row>
    <student-list-info style="float: left" @confirm="onConfirm" :student="this.student"></student-list-info>
    </el-row>
    <hr>
    <h3>學員列表</h3>
  <el-table
    :data="tableData"
    @row-click="onRowClick"
    border
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性別"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年齡">
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import studentListInfo from './student-list-info'

export default {
  name: 'student-list',
  components: {
    studentListInfo
  },
  data () {
    return {
      tableData: [{
        name: '張楚嵐',
        sex: '男',
        age: '23'
      },
      {
        name: '馮寶寶',
        sex: '女',
        age: '99'
      },
      {
        name: '趙方旭',
        sex: '男',
        age: '59'
      },
      {
        name: '肖自在',
        sex: '男',
        age: '36'
      }
      ],
      student: {
        name: '',
        sex: '',
        age: 0
      }
    }
  },

  methods: {
    onConfirm (item) {
      this.tableData.push(item)
    },
    onRowClick (row) {
      this.student = {
        name: row.name,
        sex: row.sex,
        age: row.age
      }
    }
  }
}
</script>

<style scoped>

</style>