vue父子组件传值

记录一下项目中遇到的问题。

因为一个流程对应一种单据，所以每次点击单据详情，应该出现相应的单据内容。在另一个页面，也需要调用这个单据内容。

因为vue不能直接调用弹出框，所以老师把单据内容写成了组件，在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。（其实在本来显示单据内容的页面，只要根据后端传的内容判断显示哪个单据就可以，但是因为在另一个页面也需要调用单据内容，所以写成组件会更方便。由此，如果一个页面或者弹出框，在很多个页面需要用到，可以把这个地方的内容写成组件）

父子组件就是在一个vue文件中引入另一个vue文件，被引入vue文件就是子组件，引入vue文件的vue文件就是父组件。显然在项目中，单据内容的页面是子组件，引用单据内容的页面是父组件。

我们的子组件applyType.vue：

父组件：

1.父组件调用子组件

首先import 子组件名称 from 子组件地址，接着在components里面添加这个子组件名称，子组件就被调用了。

然后在需要这个子组件的地方，调用这个子组件就可以。 

而在父组件中是不能直接调用子组件中的变量值的。所以父子组件如何传值？

2.父组件向子组件传值

父组件 在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用 。

:子组件接收父组件数据的元素="父组件传递的值"

 3.子组件接收父组件传来的值

使用props进行接收。

如此，父组件就可以调用子组件，并显示子组件里的内容啦。

结合实例：

子组件只是一个页面，里面是没有内容的。所以需要父组件传给子组件，子组件才能显示内容。

更新：

上面的这个方法，最后由于那个附加单据里的内容很多很杂，不方便重新写，所以最后采用的是router-view路由跳转的方法，详情可以看这篇文章vue使用router-view调用页面_芝士焗红薯的博客-CSDN博客

但是最近又有一个类似的功能需要用到父子组件传值，终于算是把父子组件传值整明白了一点。首先一个问题就是，所有的方法都要写在父组件里。我本来想把cradno传给子组件，然后在子组件里调用所有的方法（因为需要调用的方法太多了）。但是发现不可以。因为子组件的方法调用，在父组件把cardno传给子组件之前。（我是真的不知道可以不可以，可能真的也是可以的，只是我不会。）

 总之最后，我们只能在父组件里调用方法，然后把返回的所有的值，都传给子组件就行，也非常的方便。

父组件：

<!-- 详情modal -->
<Modal
   v-model="detailModal"
   :mask-closable="false"
   @on-cancel="cancelModal"
   :transfer="false"
   fullscreen
   :footer-hide="true"
>
  <DetailType :detailForm = "detailForm" :xljlTable = "xljlTable" :jzdsqkTable = "jzdsqkTable" :selectList = "selectList"
              :gzjlTable = "gzjlTable" :lwfbqkTable = "lwfbqkTable" :zzcbqkTable = "zzcbqkTable" :zcktqkTable = "zcktqkTable"
              :jlhbzqkTable = "jlhbzqkTable" :fwshqkTable = "fwshqkTable" :ndxjTable = "ndxjTable" :bgxxTable = "bgxxTable"
              :photoPath = "photoPath"></DetailType>
</Modal>

在data里也需要定义 ：

photoPath: '', // 照片
currentCardNo: '', // 当前的身份证
// currentRow:{}, // 当前行
xljlTable: [], // 学历简历表格
jzdsqkTable:[], // 兼职导师情况表格
gzjlTable:[], // 工作经历
lwfbqkTable:[], // 论文发表情况
zzcbqkTable:[], // 著作出版情况
zcktqkTable:[], // 主持课题情况
jlhbzqkTable: [], // 奖励或表彰情况
fwshqkTable: [], // 服务社会情况
ndxjTable: [], // 年度小结
bgxxTable: [], // 变更信息

引入子组件，调用接口：

<script>
import DetailType from '../personnelManage/detailType'
components: {
 DetailType
},
methods:{
  // 获取详细信息
  getDetail (row) {
    this.detailModal = true
    this.currentCardNo = row.cardNo
    this.axios.post(this.baseDetailurl, {
      cardNo: row.cardNo
    }).then(res => {
      if (res.result === '00000') {
        this.detailForm = res.data
        this.getXljlTable()
        this.getJzdsqkTable()
        this.getGzjlTable()
        this.getLwfbqkTable()
        this.getZzcbqkTable()
        this.getZcktqkTable()
        this.getJlhbzqkTable()
        this.getFwshqkTable()
        this.getNdxjTable()
        this.getBgxxTable()
        this.getPhoto()
      } else {
        this.$Message.error(res.data.infomation)
      }
    })
  },
}
</script>

 子组件只需要写好页面，接受props就可以啦

props: {
  // currentCardNo:String
  detailForm:Object,
  xljlTable: Array,
  jzdsqkTable:Array,
  gzjlTable:Array,
  lwfbqkTable:Array,
  zzcbqkTable:Array,
  zcktqkTable:Array,
  jlhbzqkTable: Array,
  fwshqkTable: Array,
  ndxjTable: Array,
  bgxxTable: Array,
  selectList: Object,
  photoPath: String
},

 写的时候还发现一个问题，就是控制台报错The data property "photoPath" is already declared as a prop. Use prop default value instead.

意思是这个data的属性photoPath已经在prop声明了，使用prop默认的值替代。

这是因为我在父组件里因为创建声明photoPath，后面又在子组件的data声明和初始化photoPath，导致了冲突。只要把在子组件的data里定义的photoPath删掉就好啦。

关于父子组件应该就是这些内容了，如果下次再有变化，可能就真的是我发现可以给子组件传值，让子组件调用接口了。