vue3中setup用法与methods用法踩坑

vue3 使用element-plus Dialog踩坑记录之methods用法与setup用法

• Element Dialog最原始的调用
• 1.在methods()中踩的坑
• 2.在setup()中踩的坑

Element Dialog最原始的调用

复制过来的代码可以直接把dialog弹出来

<template>
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" v-model="dialogFormVisible">
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </span>
  </template>
</el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogFormVisible: false,
    }
  }
  };
</script>

框弹出来了，但是下面这句代码实在看得难受，想自己在方法中改变属性的值，结果悲剧来了

 @click="dialogFormVisible = true">

1.在methods()中踩的坑

错误的代码

<template>
<div>
<el-button type="text" @click="show-dialog">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" v-model="dialogFormVisible">
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </span>
  </template>
</el-dialog>
</div>
</template>

<script>
  export default {
    data() {
      return {
        dialogFormVisible: false
      };
    },
    method:{
      show_dialog(){
        this.dialogFormVisible=true;
      }
    }
};
</script>

结果怎么点按钮框也出不来，浏览器也不报错，弄了好久才知道是methods写成了method，要提醒的是记得在methods中需要加this

2.在setup()中踩的坑

错误的代码

<template>
<div>
<el-button type="text" @click="show_dialog">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" v-model="dialogFormVisible">
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </span>
  </template>
</el-dialog>
</div>
</template>

<script>
export default {
    setup()
    {
      let dialogFormVisible=false
      let show_dialog=()=>{
        dialogFormVisible=true;
      }
      return{
        show_dialog,
        dialogFormVisible
      }
    }
};
</script>

这下错误就是基础不牢导致的，正确的代码

<template>
<div>
<el-button type="text" @click="show_dialog">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" v-model="dialogFormVisible">
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </span>
  </template>
</el-dialog>
</div>
</template>

<script>
import {ref} from 'vue'
export default {
    setup()
    {
      let dialogFormVisible=ref(false)
      let show_dialog=()=>{
        dialogFormVisible.value=true;
      }
      return{
        show_dialog,
        dialogFormVisible
      }
    }
};
</script>

双向绑定的变量在setup中定义时要加ref，修改变量的值时要加value