vue 父组件动态给子组件传值，实现一个添加日程弹窗

father.vue

<template>
	 <!-- 添加日程 -->
     <div class="dd schedule">
        <h5>添加日程</h5>
        <el-calendar class="my-calendar">
          <template
            slot="dateCell"
             slot-scope="{data}"
           >
             <div
               :class="data.isSelected ? 'is-selected' : ''"
               @click="handleClickDay(data)"
              >
              {{ data.day.split('-')[2].charAt(0) === '0' ? data.day.split('-')[2].slice(1) : data.day.split('-')[2]}}</div>
        </template>
     </el-calendar>
 </div>
  //添加日程弹窗
  <add-schedule ref="addSchedule" />
</template>

<script>
	components: {
   		AddSchedule: () => import('@/components/AddSchedule/index')// 添加日程
 	 },
 	 methods:{
 	 	// 点击日历
   		handleClickDay(data) {
   		  //open是子组件的method，可接收父组件传递得参数data
          this.$refs.addSchedule.open(data)
        },
 	 }
</script>

son.vue

<template>
  <!-- 弹窗：添加行程 -->
  <el-dialog
    title="添加日程"
    :visible.sync="dialogFormVisible"
    width="520px"
    :close-on-click-modal="false"
    destroy-on-close
    @close="closeDialog"
  >
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="日程时间" label-width="200" prop="date">
        <el-input v-model="form.date" autocomplete="off" />
      </el-form-item>
      <el-form-item label="待办工作" label-width="200" prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" :disabled="!form.date || !form.content" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        date: '',
        content: ''
      },
      rules: {
        date: [
          { required: true, message: '请添加日程时间', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入待办工作', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    //父组件传过来得事件
    open(data) {
      this.form.date = data.day
      this.dialogFormVisible = true
    },
    // 弹窗关闭回调
    closeDialog() {
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    }
  }
}
</script>

总结：

父组件通过this.$refs.子组件ref名.methodName(data)动态传参
子组件通过methodName(data){
			//accept data
			//do something
		  }