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>