vue學習筆記之父元件子元件的傳值

阿新 • • 發佈：2021-07-29

一在前端開發過程中，很多情況下一個頁面無法裝載大部分的程式碼，所以需要子元件來完成父元件的任務，下面我來展示一下，元件之間如何進行傳值以及常見的坑，首先上程式碼

1.1 父元件程式碼

<template>
  <div class="app-container">
    <eHeader :query="query"/>
        <el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
          <el-table-column prop="type" label="xxx"/>
          <el-table-column prop="public_address" label="xxx"/>
          <el-table-column prop="private_address" label="xxx"/>
          <el-table-column prop="location" label="xxx"/>
          <el-table-column prop="strategy" label="xxx"/>
          <el-table-column prop="dns" label="xxx"/>
          <el-table-column prop="status" label="xxx"/>
          <el-table-column prop="reboot_time" label="xxx"/>
          <el-table-column label="xxx" width="240px" align="center">
            <template slot-scope="scope">
              <el-button v-if 
="checkPermission(['xxx'])" type="primary" size="mini" plain @click="getuser(scope.row)" style="margin-left:0px">使用者詳情</el-button>
            </template>
          </el-table-column>
          <!--<el-table-column prop="desc" label="備註"/>-->
        </el-table>
        <!--抽屜元件-->
        <eDrawer  @sendVal="closeDialog" :isDrawerShow="isDrawerShow" :drawerData="drawerData"/>####這裡將資料布林值以及函式傳給子元件
        <!--分頁元件-->
        <el-pagination
          :total 
="total"
          :page-sizes="[25, 50, 100, 200]"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"/>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { getKey } from  
'@/api/dict'
import { parseTime } from '@/utils/index'
import eHeader from './module/header'
import eDrawer from './module/drawer'    ##這裡引入抽屜子元件export default {
  components: { eHeader,eDrawer },
  mixins: [initData],
  data() {
    return {
      row_data: null,
      span1: 24,
      show: false,
      table_show: true,
      transfer_data: [],
      Loading: false,
      sup_this: this,
      isDrawerShow:false,###需要傳入子元件的布林值，true開啟，false關閉
      drawerData:{} ###傳入子元件的資料
  }

　　　　1.2 子元件程式碼

<template>
    <div>
        <el-drawer
            title="使用者詳情!"
            :visible.sync="is_show" ####與區域性變數is_show繫結,true開啟，false關閉
            direction="rtl"
            size="50%">
            <div class="item">
              <p class="labelContent">備註：</p>
              <p class="contentN">{{drawerData.public_address}}</p>
            </div>
        </el-drawer>
    </div>
</template>

<script>
export default {
    props:{#用prop來接收父元件的值，由於資料不需要回傳和改變直接使用
      isDrawerShow: {
          type: Boolean,
          required: true
      },
      drawerData:{#布林值會改變，需要引入區域性變數is_show中
          type: Object,
          required: true
      },
    },
    computed: {
    is_show: {
        set(val){##改變父元件中的值
          this.$emit('sendVal',val)
                },
        get(){##獲取父元件的值
          return this.isDrawerShow
              }
    }
  }
}
</script>