2021-05-14

vue3.0父子组件传值

父组件：

<template>
  <div>
    <div class="classify">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="dialogFlagAdd">
      新增</el-button>
    </div>
      <el-button type="text" icon="el-icon-edit" @click="dialogFlagEdit">编辑</el-button>
    </el-table>
    <add-dialog :dialogFlag="dialogFlag" :title="title" @changeDialogFlag="changeDialogFlag">
    </add-dialog>
  </div>
</template>
<script>
import {
  onMounted,
  ref,
  reactive,
  toRefs,
} from 'vue';
import AddDialog from './AddDialog.vue';

export default {
  components: {
    AddDialog,
  },
  setup() {
    const dialogFlag = ref(false);
    const title = reactive({
      value: '',
    });
    const dialogFlagAdd = () => {
      dialogFlag.value = true;
      title.value = '1';
      console.log(dialogFlag.value);
      console.log(title.value);
    };
    const dialogFlagEdit = () => {
      dialogFlag.value = true;
      title.value = '2';
      console.log(dialogFlag.value);
      console.log(title.value);
    };
    const changeDialogFlag = (val) => {
      dialogFlag.value = val;
      console.log(dialogFlag.value);
    };

    return {
      title,
      dialogFlag,
      dialogFlagAdd,
      dialogFlagEdit,
      changeDialogFlag,
    };
  },
};
</script>

子组件： 

<template>
  <div>
    <el-dialog :title="tit.val" :modelValue="dialogFlag">
//  这种写法行不通 不知道为什么
//  <el-dialog :title="tit.val" v-model:dialogFlag="dialogFlag">
    <el-form :model="form">
    <el-form-item label="活动名称">
        <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    </el-form>
    <div class="dialog-footer">
    <el-button @click="closeDialog">取消</el-button>
    <el-button type="primary" @click="AddAction">确定</el-button>
    </div>
    </el-dialog>
  </div>
</template>
<script>
import { onMounted, reactive, watchEffect } from 'vue';

export default {
  props: {
    dialogFlag: Boolean,
    title: {
      value: '',
    },
  },
  setup(props, { emit }) {
    const tit = reactive({
      val: '',
    });
// 监听父组件传过来的 'title'
    watchEffect(() => {
      if (props.title.value === '1') {
        tit.val = '新增';
        console.log(tit.val);
        console.log(props.title.value);
      } else {
        tit.val = '编辑';
        console.log(tit.val);
        console.log(props.title.value);
      }
    });
    const form = reactive({
      name: '',
    });
    const closeDialog = () => {
      emit('changeDialogFlag', false);
    };
    const AddAction= () => {
      emit('changeDialogFlag', false);
      console.log(props.dialogFlag);
    };
    onMounted(() => {
      console.log(props.dialogFlag);
      console.log(props.title.value);
    });
    return {
      tit,
      form,
      closeDialog,
      AddAction,
    };
  },
};
</script>