Vue系列【父子组件传值】

一、父组件给子组件传值

1.在父组件中的data里定义一个属性，并绑定到子组件标签上，这里以user.vue（父组件）和userAdd.vue（子组件）为例。

<template>
  <div style='overflow:hidden;'>
    <div class='search'>
      姓名:
      <el-input ref='formId' placeholder='请输入内容' v-model='param.name' style=' 2px'></el-input>
      <el-button type='primary' @click='submitForm()'>搜索</el-button>
      <el-button @click='resetForm()'>重置</el-button>
    </div>
    <el-row style='text-align: left;margin-top: 1%'>
      <el-button type='primary' plain @click="addDialog">新增</el-button>
    </el-row>
    <div class='tableList'>
      <el-table
        :data='tableData'
        border
        style=' 100%'>
        <el-table-column type='index' label='序号' width='180'></el-table-column>
        <el-table-column prop='loginName' label='账号'></el-table-column>
        <el-table-column prop='name' label='姓名' width='180'></el-table-column>
        <el-table-column prop='genderName' label='性别'></el-table-column>
        <el-table-column prop='mobile' label='手机号'></el-table-column>
        <el-table-column prop='birthday' label='生日'></el-table-column>
        <el-table-column prop='remark' label='备注'></el-table-column>
        <el-table-column prop='createTime' label='创建时间'></el-table-column>
        <el-table-column prop='statusName' label='状态'>
          <template slot-scope='scope'>
            <el-switch v-model='scope.row.status' active-value='0' inactive-value='1'
                       @change='changeStatus(scope.row)'></el-switch>
          </template>
        </el-table-column>
        <el-table-column label='操作'></el-table-column>
      </el-table>
      <div style='text-align: left'>
        <el-pagination
          @size-change='handleSizeChange'
          @current-change='handleCurrentChange'
          :current-page='param.pageNo'
          :page-sizes='[10, 20, 30, 40]'
          :page-size='param.pageSize'
          layout='total, sizes, prev, pager, next, jumper'
          :total='param.total'>
        </el-pagination>
      </div>
    </div>
　　<!--3.先在下面data中定义变量showDialog，然后在子组件标签上用冒号绑定上变量showDialog-->
    <userAdd :showDialog='showAddDialog'></userAdd>
  </div>

</template>

<script>
import axios from 'axios'
//1.引入子组件
import userAdd from '@/views/user/userAdd'

export default {
  components:{
    userAdd
  },
  data() {
    return {
　　　　//2.定义变量
      showAddDialog: false,
      tableData: [],
      param: {
        name: '',
        pageNo: 1,
        total: 0,
        pageSize: 10
      },
      userState: true,
      tableHeight: ''

    }
  }
}

2.子组件接收

<template>
  <div>
    <el-dialog
      title='提示'
      :visible.sync='dialogVisible'
      width='30%'
      :before-close='cancel'>
      <span>这是一段信息</span>
      <span slot='footer' class='dialog-footer'>
    <el-button @click='cancel'>取 消</el-button>
    <el-button type='primary' @click='dialogVisible = false'>确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
//1.定义showDialog变量（和父组件中传过来的值一致），指定默认值和类型
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
//2.监听，若变量showDialog的值发生了变化，就会触发handler方法
  watch: {
    showDialog: {
      handler(val) {
　　　　//3.接收父组件传过来的值
　　　　console.log(val,'val即为父组件传过来的值')
        this.dialogVisible = true
      }
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    cancel() {
      this.dialogVisible = false
    }
  }
}
</script>

二、子组件向父组件传值

子组件通过 $emit() 触发在节点上绑定的自定义事件来执行父组件的方法，如下例子中实现了如何将子组件中的count值传递到父组件上。子组件定义了emitEvt事件（父组件中引用时，需要添加on前缀），子
组件在调用 $emit() 时，携带了count参数，父组件在响应事件时，便可获取到参数值。
这里以user.vue（父组件）和userAdd.vue（子组件）为例。

1.在userAdd.vue（子组件）中传递对象

<template>
  <div>
　　　<!--1.定义触发事件change-->
    <el-button type='primary' @click="change()">子组件传给父组件name</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
　　　　//2.定义要向父组件传的值obj
      obj: {}
    }
  },
  methods: {
　　//3.实现change方法，并给obj赋值，把参数obj传递给父组件，父组件触发的自定义事件为cname
    change(){
      this.obj.name='zhangsan';
      this.obj.age = 15;
      this.$emit("cname",this.obj)
    }
  }
}
</script>

2.在user.vue（父组件）中，接收obj对象

<template> 
 <div>
　　<!--1.在父组件中定义子组件传过来的自定义事件名cname，用来接收子组件传过来obj-->
    <userAdd :showDialog='showAddDialog' @cname='getChildObj'></userAdd>
  </div>
</template>

<script>
import axios from 'axios'
import userAdd from '@/views/user/userAdd'

export default {
  components:{
    userAdd
  },
  data() {
    return {
    }
  },
  methods: {
　　//2.定义方法，接收子组件传过来的值，val即为子组件obj传过来的值
    getChildObj(val){
      console.log(val,'子组件传过来的参数:')
    }
}