vue父子组件传值

组件引用

父组件传值到子组件

父页面 通过v-bind:address=”item” 传值可以是对象……

<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="24">
      <el-col v-for="(item,index) in this.indexConfigList" :key="index" :span="item.span">
        <div v-if="item.name ==='panelGroup'">
          <panel-group v-bind:address="item" />
        </div>
        <div style="margin-top: 32px;" class="chart-wrapper" v-if="item.name ==='lineChart'">
          <LineChart v-bind:lineChart="item" />
        </div>
        <div class="chart-wrapper" v-if="item.name ==='histogram'">
          <Histogram v-bind:histogram="item" />
        </div>
        <div class="chart-wrapper" v-if="item.name ==='pieChart'">
          <PieChart v-bind:pieChart="item" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
 <script>
import PanelGroup from './indexconf/model/PanelGroup'
import LineChart from './indexconf/model/lineChart'
import Histogram from './indexconf/model/histogram'
import PieChart from './indexconf/model/pieChart'
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    Histogram,
    PieChart,
  },
  data () {
    return {
     
     }
  },
  created () {

  },
  methods: {

  },
}
 </script>
 <style lang="scss" scoped>
</style>

子页面 通过props接收

<template>
  <el-row class="panel-group">
    <div class="card-panel">
      <div class="card-panel-icon-wrapper icon-people">
        <i style="float: left;font-size: 48px;" :class="address.prefixIcon" class-name="card-panel-icon"></i>
      </div>
      <div class="card-panel-description">
        <el-tooltip class="card-panel-text" effect="dark" :content="address.tagname" placement="top-start">
          <div id="text">{{ address.modelName }}</div>
        </el-tooltip>
        <i class="card-panel-num">{{tagValue}}</i>
      </div>
    </div>
  </el-row>
</template>
<script>
import CountTo from 'vue-count-to'
import { getTagValue } from "@/api/tagmg/tag";
export default {
  components: {
    CountTo
  },
  props: {
    address: {
    }
  },
  data () {
    return {
      // address: {},
      timer: '',
      tagValue: null
    }
  },
  methods: {
    getTag () {
      getTagValue(this.address.tagname).then(response => {
        this.tagValue = response.data.stringValue
      });
    },
  },
}
</script>

子组件向父页面传值

父页面 通过v-on:childByValue=”childByValue” 接收值

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-row :gutter="10" class="mb8">
      	<tagRemote v-on:childByValue="childByValue"></tagRemote>
     </el-row>
    </el-form>
   </div>
</template>
<script>
import tagRemote from "@/views/tagmg/tag/tagRemote";
export default {
  name: "",
  data () {
    return {
      };
  },
   components: {
    tagRemote
  },
  created () {
  },
  methods: {
    childByValue (childValue) {
      this.queryParams.tag = childValue
    },
                }
};
</script>

子组件 通过this.$emit(‘childByValue’, this.queryParams.tag) 传值

<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="计算测点" prop="tag">
        <el-select :remote-method="remoteMethod" remote reserve-keyword v-model="queryParams.tag" placeholder="请选择"
          filterable clearable size="small" @blur="blur" @change="changeTag">
          <el-option v-for="item in tagOptions" :key="item.uuid" :label="item.tagname" :value="item.uuid">
            <span style="float: left ">{{ item.tagname }}</span>
            <span style="float: right;color: #8492a6;font-size: 13px">{{ item.dsourceName }}
              &nbsp;{{ item.tagdesc }}</span>
          </el-option>
          <div style="width:400px;text-align:center;height:50px">
            <!-- :page-sizes="[10]" :page-size="10" -->
            <pagination v-show="tagTotal>0" :total="tagTotal" :page.sync="tagQueryParams.pageNum"
              :limit.sync="tagQueryParams.pageSize" :pager-count="5" @pagination="getTagList"
              layout="total, prev, pager, next">
            </pagination>
          </div>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "",
  data () {
    return {
      };
  },
  created () {
    
  },
  methods: {
    changeTag () {
      this.$emit('childByValue', this.queryParams.tag)
    },
  }
};
</script>

阅读量

赏

谢谢你请我吃糖果

支付宝

微信