vue3.0---定义事件

最新推荐文章于 2024-08-30 19:58:42 发布

智慧2021

最新推荐文章于 2024-08-30 19:58:42 发布

阅读量263

点赞数

分类专栏： vue3.0

本文链接：https://blog.csdn.net/weixin_38687522/article/details/117561951

版权

vue3.0 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

这篇博客介绍了在 Vue.js 中如何使用 ref 和 reactive 进行数据绑定，并展示了在模板中如何通过点击事件调用方法。文章通过一个简单的例子展示了 click 事件的绑定以及在方法中访问 ref 和 reactive 数据的不同方式，强调了在方法内部访问 ref 数据需要使用 .value 的注意事项。

摘要由CSDN通过智能技术生成

<template>
<div @click="clickFn1(203)">{{num1}}</div>
<div @click="clickFn2">{{num2}}</div>

</template>
<script>

import { defineComponent, ref, reactive, toRefs } from "vue";
export default defineComponent({
  name: "home",
  setup(props, ctx) {
    let num1 = ref("20");
    let data = reactive({
      num2: 10,
    });
    let clickFn1=(val)=>{
      // 在方法里访问ref数据，要使用数据名.value
      console.log(num1.value)
      console.log('1')
      console.log(val)
    }
    let clickFn2=()=>{
      // 在方法里访问reactive数据，就不需要，可以直接访问
      console.log(data.num2)
      console.log('2')
    }
    return {
      num1,
      ...toRefs(data),
      clickFn1,
      clickFn2
    };
  },
});
</script>
<style scoped lang="scss">
</style>