vue父子组件传值

用elementui dialog做为子组件

1. 父组件传递visible控制子组件是否显示
2. 子组件通过props接收visible , 但是子组件内部不能直接修改父组件传过来的值.
   所以在子组件内部定义一个本地变量 myVisible 用来保存 props接收的值
   并且通过watch方法监听接收的值, 去更新内部myVisible 变量
3. 子组件关闭需要通知父组件, 所以dialog的close方法需上报数据@close="$emit('dialogClose')"父组件接收并更新visible的值

#父组件
<ChangePassword v-bind:visible="visible" @dialogClose="visible=false"></ChangePassword>
data: function () {
    return {
      visible: false
    }
  },

#子组件
<template>
  <el-dialog title="修改密码" :visible.sync="myVisible" @close="dialogClose" :append-to-body="true">
    <el-form :model="form">
      <el-form-item label="新密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码确认" :label-width="formLabelWidth">
        <el-input v-model="form.rePassword" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="myVisible = false">取 消</el-button>
      <el-button type="primary" @click="myVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
const axios = require('axios')
export default {
  name: 'ChangePassword',
  data () {
    return {
      form: {
        password: '',
        rePassword: ''
      },
      formLabelWidth: '120px',
      myVisible: false
    }
  },
  props: ['visible'],
  watch: {
    visible: function (newV, oldV) {
      this.myVisible = newV
    }
  }
}
</script>