vue子父传值

今天让我写个基于vue的系统管理员授权拆分的功能，一开始我是真的难，非常难过，因为这块代码很乱，功能也很怎么说，其实客户需求还是可以的，只不过从原代码改造，非常恶心。

但是经过一下午的努力奋战， 我完成了 并且我对vue的父子传值有了更深的认识和理解 其实就是三把斧 很开心

父传子(父页面调子页面)：

就是用父页面

<adminList ref="addModule"
                 @func="getmessage" ></adminList>

import adminList from './set-as-admin-list'

components: {
      adminList
    },

在方法里，这里一定要别拉下this.$nextTick(()=>{})

因为这个地方相当于子组件的一个延迟加载方法，否则会报undefined 详情原因见

Vue父组件引用子组件方法显示undefined问题原因及解决方法

this.$nextTick(() => {
          this.$refs.addModule.init(this.struId, this.organId, false)
        })

这里的$refs.addModule,相当于操作dom，就是操作子组件的里面的方法或者值

子页面

init (struId, organId, isAdmin) {
        debugger
        this.isAdmin = isAdmin
        this.struId = struId
        this.organId = organId
        this.getPersonList(struId)
      },

,上面就是把父页面的struId，organId，false传给了子页面，并且，还顺便调用了子页面的方法。

并且值得注意的是，可以同一个组件在父页面用好几遍，只不过,ref="不同的值"

父页面

<adminList ref="authorizationModal"
                 @func="getmessage" ></adminList>

子传父：

也很简单，

子页面

在方法里

this.$emit('func', data)

父页面去接

<adminList ref="authorizationModal"
               @func="getmessage" ></adminList>

其中func是要传的key

value就是用"getmessage"去接收，这里是方法

getmessage (data) {
        this.authorizationVisible = data

      },

这样就把子页面的data传给了父页面