vue3编写组件的几种方式
一、选项式写法
1、在 vue2.x 项目中使用的写法就是选项API的 写法(说明:类似于与vue2中的data里面写的是定义的数据,methods里面写的是处理数据的方法,每一个选项都只负责自己的部分)
优点:易于学习,代码位置固定,便于阅读;
缺点:代码组织性差,相似的逻辑代码不便于复用;
2、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); // 123456console.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>
二、组合式写法
1. 组合式写法(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写法
1.使用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组合式的语法糖写法。
vue3编写组件的几种方式相关推荐
- java jframe添加面板_JFrame添加组件的两种方式
对JFrame添加组件有两种方式:1) 用getContentPane()方法获得JFrame的内容面板,再对其加入组件:frame.getContentPane().add(childCompont ...
- vue 实例化几种方式_vue注册组件的几种方式总结
vue注册组件的几种方式总结 1.全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2.局部注册 var Child = { templ ...
- 深入解析React创建组件的三种方式
eact创建组件的三种方式: 1.函数式无状态组件 2.es5方式React.createClass组件 3.es6方式extends React.Component 三种创建方式的异同 1.函数式无 ...
- vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
- vue 在线编辑excel表格(原生和使用组件的两种方式)
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div><!-- 用组件写的编辑表格 -->& ...
- Unity3D获取游戏对象组件的三种方式
Unity获取游戏对象组件的三种方式 用Find查询 1. GameObejct go = GameObject.Find("对象名").GetComponent<获取对象上 ...
- vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
- Vue动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
- Vue渲染组件的两种方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- system-copy 和 ShellExecute 用法
- Python基础教程:r‘‘, b‘‘, u‘‘, f‘‘ 的含义
- [学习笔记]多项式指数函数
- leetcode733. 图像渲染(bfs)
- a pycharm 标记多个_每周分享五个 PyCharm 使用技巧(二)
- 每年扫码千亿次!微信官方开源了自家优化的二维码引擎!3行代码让你拥有微信扫码能力...
- react 组件怎么公用_用 react 做一个跟随组件的 tooltip
- LeetCode刷题(41)--Sort Color
- vi/vim文本编辑器的使用
- MASM32编程将TimeStamp/UTC转换为具体日期时间的几个有用函数代码
- 侠客工具盒 v5.0 build 0313 bt
- DOTween 使用方法
- APS高级排产软件解析
- 挪威科技大学计算机硕士,挪威科技大学硕士留学申请条件
- git与github从入门到精通
- 人工智能大势已去,认知智能已经来临,强人工智能未来可期!道翰天琼认知智能为您揭秘认知智能核心三大技术体系!
- ESXi无法直通显卡
- mapreduce实现ItemCF——基于物品的协同过滤
- 从案例图学习stateflow学习en、ex、du
- 第18届智能车竞赛中的智能视觉组比赛细节遗留的问题-短视频脚本