vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3编写组件的方式

vue3编写组件的几种实现方式

作者:lethe_R

这篇文章主要介绍了vue3编写组件的几种实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

一、选项式写法

在 vue2.x 项目中使用的写法就是选项API的写法

(说明:类似于与vue2中的data里面写的是定义的数据,methods里面写的是处理数据的方法,每一个选项都只负责自己的部分)

vue3的选项式写法中也可以有vue2的写法

如果是新项目,应只选择vue3的写法(这里指vue3的项目)

代码如下:

<template>
  <div>
    <div>
      num3: {{ num3 }}
    </div>
    <div>
      num2: {{ num2 }}
    </div>
  </div>
</template>
// 类似于vue2中,data中定义数据,methods就写方法,每一个选项就写对应所负责的东西
<script>
import { ref } from "vue";
export default {
  // vue3代码
  props: {
    testProps: {
      type: Number,
      default: () => {
        return 123456;
      },
    },
  }, // 接收传过来的数据
  setup(props, context) {
    console.log("setup的props", props); // 父组件传递过来的数据,但是前提是需要在props进行数据的接收,否则无法使用
    console.log("testProps", props.testProps); // 123456
    console.log("setup的context", context);
    const num3 = ref(1);
    const addV3 = () => {
      num3.value++;
    };
    return { num3, addV3 }; // 使用选项式写法这里必须将数据return出去
  },
  // vue2代码
  data() {
    return {
      num2: 456,
    };
  },
  methods: {
    addV2() {
      this.num2++; // 这里面是可以使用this的,但是setup中不可以使用this
    },
  },
  mounted() {},
};
</script>

二、组合式写法

组合式写法(vue3特有的写法)

说明:使用选项式的写法写vue3里面可以有vue2的代码,但是如果采用vue3语法糖的写法里面是不能有vue2的写法的;

<template>
  <div>
    <div>
      num: {{ num }}
    </div>
    <div>
      comValue: {{ comValue }}
    </div>
  </div>
</template>
// 组合式写法
<script setup> // vue3的语法糖
import { computed, ref } from "vue";
const num = ref(123);
const comValue = computed(() => {
  return num.value = num.value + 1;
})
const add = () => {
    num.value++ // 使用ref定义的值需要使用点value的形式进行取值
}
console.log(comValue.value); // 124
</script>

三、JSX写法

使用defineComponent来书写组件的代码

<template>
  <div>
    <div>
      num: {{ num }}
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
// 在defineComponent使用vue3+vue2写法
export default defineComponent({
  setup() {
    const num = ref(12);
    return {
      num
    }
  },
  data() {
    return { count: 1 }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
})
// 直接在defineComponent使用vue3写法
// export default defineComponent(() =>{
//   const count = ref(0)
//   return { count }
// })
</script>

总结

虽然vue3出来也有一段时间了,但是很多项目还是用的vue2,我觉得我们也应该慢慢的去使用vue3了,从vue2到vue3的过渡,要养成一个良好的编码习惯;建议使用vue3组合式的语法糖写法。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文