vue 传值(父子组件)

举个栗子：

第一种：
 

比如这个是
这个页面为Item.vue,我们需要用userDialog 的东西
首先import userDialog from '组件目录地址'
然后在Item.vue的component中引入
在页面写入这个路由
<user-dialog v-if="userVisible" ref="userDialog" @dataByUser="dataByUser"></user-dialog>

这里的@dataByUser等价于v-on:dataByUser 

在methods里些名为dataByUser的方法

function dataByUser(obj){

 .....

obj.name 等等}

userDialog.vue 

页面里需要有个方法广播这个数据

<el-button type="text" size="small" @click="ChoiceUser(scope.row)">选择</el-button>

methods: {
  ChoiceUser (row) {
    this.dataUser.userId = row.id
    this.dataUser.username = row.realName
    this.dataUser.deptId = row.deptId
    this.dataUser.deptName = row.deptName
    this.$emit('dataByUser', this.dataUser)
    this.visible = false
}

}

第二种：

Item.vue页面：

<user-dialog v-if="userVisible" ref="userDialog" :item="comment"></user-dialog>

data () { return {

   comment: '测试'
   }
}

userDialog.vue 页面:

props 为data之外的属性，与methods，data,mounted等函数为同级

props: {
  item: Number
},

这里的item为从item.vue页面接收过来的值，可以在方法里调用或者页面上的直接调用

如：

getItem () {

   alert(this.item)

}

<el-input v-model="this.item" placeholder="item的值"/>

<el-input>${this.item}</el-input>

通过这两种方式来完成父子组件的传值。