vue3.0系列之利用组件方式使用Dialog

vue3.0系列之vue3.0系列之利用组件方式使用Dialog

实现过程

基本逻辑如下：通过父组件通过组件绑定的值向子组件传参，子组件使用props接收参数并使用。处理完毕后，通过emit函数将结果传回父组件并更改父组件的值

1. 新建组件Dialog.vue

2. 在Home.vue中引入Dialog.vue组件

3. 在组件中传参

通过flag传入控制Dialog是否显示，通过data传入所需的信息

4. 子组件接收参数并使用

:visible.sync="dialogVisible" 
           

控制弹窗是否显示

接收到参数后通过监听flag的变化改变flag的值，如果不监听的话，flag的值不能改变，只能一直是父页面传过来的第一个值

5.处理完后通过Dialog自带的方法close更改flag的值

到此为止已实现功能，data的处理类似

具体代码

<!--
 * @Description: Dialo.vue
 * @Author: ZHAN HANG
 * @Date: 2020-05-19 19:55:32
 * @LastEditTime: 2020-05-20 17:06:09
 * @LastEditors: ZHAN HANG
-->
<template>
  <div class="hello">
    <el-dialog
      :visible.sync="dialogVisible"
      width="width"
      @close="close"
      @open="open"
    >
      <div><el-input v-model="form" placeholder="输入测试代码"></el-input></div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, watch } from "@vue/composition-api";
export default {
  name: "Dialog",
  props: {
    flag: Boolean,
    data: { type: Array, default: () => [] }
  },
  setup(props, { root, emit }) {
    const dialogVisible = ref(false);
    const form = ref("");
    // open(): Dialog弹窗打开之前做的事 <弹出父页面传入的data数据>
    const open = () => {
      root.$message({
        message: "name:" + props.data.name + ", age: " + props.data.age,
        type: "success"
      });
      form.value = "name:" + props.data.name + ", age: " + props.data.age;
    };
    // close(): Dialog弹窗关闭之后做的事 <更改flag的值，使弹窗关闭>
    const close = () => {
      dialogVisible.value = false;
      emit("update:flag", false);
    };
    watch(() => {
      dialogVisible.value = props.flag;
    });
    return {
      dialogVisible,
      form,
      close,
      open
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

           

<!--
 * @Description: Home.vue
 * @Author: ZHAN HANG
 * @Date: 2020-05-19 19:55:32
 * @LastEditTime: 2020-05-20 16:52:15
 * @LastEditors: ZHAN HANG
-->
<template>
  <div class="home">
    <el-button type="primary" @click="showDialog">点击弹窗</el-button>
    <Dialog :flag.sync="show" :data="data" />
  </div>
</template>

<script>
// @ is an alias to /src
import Dialog from "@/components/Dialog.vue";
import { ref, reactive } from "@vue/composition-api";
export default {
  name: "Home",
  components: {
    Dialog
  },
  setup() {
    const show = ref(false);
    const data = reactive({
      name: "jack",
      age: 18
    });
    const showDialog = () => {
      show.value = true;
    };
    return {
      show,
      showDialog,
      data
    };
  }
};
</script>