2020-10-9vue根据id跳转页面，并且使用props和$emit实现父子组件组件传值

最新推荐文章于 2024-02-16 12:30:23 发布

小学生也要加班

最新推荐文章于 2024-02-16 12:30:23 发布

阅读量444

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44281416/article/details/108974200

版权

父子组件之间传值

//父组件 index.vue
<template slot-scope="scope">
  <el-button type="primary" @click="showDetail(scope.row)">详情</el-button>//查看某一行的数据
</template>
<transition name="el-zoom-in-center">
  <approvalDetail v-if="show==2" :rowData="rowData" @showPage="showPage(arguments)">
    //:rowData是v-bind:rowData的缩写，用来父组件给子组件传递数据而绑定的值,需要在下面定义才能使用
    //@showPage即v-on:showPage监听子组件的自定义事件
    //arguments是子组件传到父组件的参数
  </approvalDetail>
</transition>

<script>
import approvalDetail from './components/approvalDetail'
export default {
  data() {
    return {
     rowData:{},
     show:1,
  }
  components: {
    approvalDetail,
  },
  methods:{
      //跳转到详情页面
    showDetail(row) {
      this.rowData = row
      this.show = 2
    },
    showPage(arguments){
      this.show = 1
    }
   }
  }
</script>



//在子组件approvalDetail.vue中
//由于在父组件index.vue中this.rowData = row表示row里面的数据全都赋值给rowData,所以如果子组件取值，直接rowData.字段名就行
<div class="info">
 <span>申报单位：{{rowData.applicant}}</span>
 <span>申请人：{{rowData.applicantPerson</span>
 <span>部门：{{rowData.appDeptment}}</span>
</div>
<el-button type="primary" @click="showPage(2)">同意</el-button>
<script>
 export default{
  props:{
   rowData:Object
  },
  methods:{
    showPage(type) {
      this.$emit('showPage', type, this.data.id)
      //子组件使用$emit触发事件，type，this.data.id是子组件传递给父组件的两个参数
    },
  }
 }
 </script>