赞
踩
今天来学习下vue3组合式函数用法,先甩官方链接:组合式函数。
vue2的时候,以一个vue文件是按照vue给的模块文件来写的,也就是选项式API写法(一个文件里有template、script、style)。现在vue3新出了一个组合式API写法(一个文件里有template、script、style)。两者区别主要在script部分,选项式API写法中,script是已经预设了属性方法使用方式的,例data、components、computer、watch、methods等;组合式API写法则没有预设(根据暴露的方法或属性按照自己的想法写)。
组合式API的出现弥补了选项式API的一些缺点:
现在好了,可以用组合式函数了,很nice,我们下面来使用下。
<script lang="ts" setup>
</script>
<script>
export default {
setup(){
return {}
}
...
}
</script>
使用之前我们先来熟悉下vue为组合式写法提供的方法或属性,官方API链接。api有点多,我们先只了解常用的几个:
常用的就这几个,上面两种方式使用组合式API会有所不同,建议看下官网了解下。
我在一个页面内使用了以前创建的几个组件,然后使用组合式函数分割js代码:
首先创建一个承载数据函数的文件夹,这个文件夹想放哪就放哪,取名也是。这里因为基本都是数据,所以我在同级创建了一个data文件夹,里面存放管理数据的ts文件:
编写ts文件,建议一个ts文件只放一个组合式函数并默认导出,组合式函数约定用驼峰命名法命名,并以“use”作为开头。
attribute.ts
/* * @Date: 2022-11-16 11:07:43 * @LastEditors: zhangsk * @LastEditTime: 2022-11-16 11:08:28 * @FilePath: \basic-demo\src\pages\data\attribute.ts * @Label: Do not edit */ export default function useAttributeData() { const attributes = { style: "backgroundColor:#eaeaea;", class: "bind", hhh: "lalala", }; return { attributes } }
calculate.ts
/* * @Date: 2022-11-16 10:58:28 * @LastEditors: zhangsk * @LastEditTime: 2022-11-16 11:03:54 * @FilePath: \basic-demo\src\pages\data\calculate.ts * @Label: Do not edit */ import { reactive, ref } from "vue"; export default function useCalculateData() { const form2 = reactive({ valueOne: 0, selected: "+", valueTwo: 0, }); const result = ref(0); // 计算 const calculateFun = () => { const { selected, valueOne, valueTwo } = form2; switch (selected) { case "+": result.value = valueOne * 1 + valueTwo * 1; break; case "-": result.value = valueOne - valueTwo; break; case "*": result.value = valueOne * valueTwo; break; case "/": result.value = valueOne / valueTwo; } }; // 返回需要的属性和方法 return { form2, result, calculateFun } }
dynamic.ts
import { reactive, ref, watch } from "vue"; export default function useDynamicData() { interface component { name: string; // 组件名 attrs: object; //组件属性 key: string; listenEvents?: object; // 监听事件名 content?: any; // 组件内容 } const value = ref("1"); interface stringKey { [key: string]: any; } interface obj extends stringKey { inputValue: string; checkedNames: Array<string>; } const form = reactive({ inputValue: "", checkedNames: [], }) as any; const componentsArr: Array<component> = [ { name: "input", key: "inputValue", attrs: { type: "text", placeholder: "请输入值", "v-model": form.inputValue, }, listenEvents: { input: (e: any) => { value.value = e.target.value; form.inputValue = e.target.value; }, }, }, { name: "input", key: "checkedNames", attrs: { type: "checkbox", value: "one", id: "one", "v-model": form.checkedNames, }, listenEvents: { change: (e: any) => { CheckboxChange(e.target.value); }, }, content: { name: "label", attrs: { for: "one", }, content: "one", }, }, { name: "input", key: "checkedNames", attrs: { type: "checkbox", value: "two", id: "two", "v-model": form.checkedNames, }, listenEvents: { change: (e: any) => { CheckboxChange(e.target.value); }, }, content: { name: "label", attrs: { for: "two", }, content: "two", }, }, { name: "input", key: "checkedNames", attrs: { type: "checkbox", value: "three", id: "three", "v-model": form.checkedNames, }, listenEvents: { change: (e: any) => { CheckboxChange(e.target.value); }, }, content: { name: "label", attrs: { for: "three", }, content: "three", }, }, ]; watch( () => value.value, () => { console.log(value.value, "value改变"); } ); const CheckboxChange = (v: string) => { if (form.checkedNames.includes(v)) { form.checkedNames = form.checkedNames.filter((v2: string) => v2 !== v); } else { form.checkedNames.push(v); } }; return { form, value, componentsArr } }
tree.ts
/* * @Date: 2022-11-16 11:04:58 * @LastEditors: zhangsk * @LastEditTime: 2022-11-16 11:05:25 * @FilePath: \basic-demo\src\pages\data\tree.ts * @Label: Do not edit */ import { reactive } from "vue"; export default function useTreeData() { const treeData = reactive([ { name: "1-1", key: "1-1", lable: "1-1", children: [ { name: "1-1-1", key: "1-1-1", lable: "1-1-1", children: [], }, { name: "1-1-2", key: "1-1-2", lable: "1-1-2", children: [], }, { name: "1-1-3", key: "1-1-3", lable: "1-1-3", children: [], }, ], }, { name: "1-2", key: "1-2", lable: "1-2", children: [ { name: "1-2-1", key: "1-2-1", lable: "1-2-1", children: [ { name: "1-2-1-1", key: "1-2-1-1", lable: "1-2-1-1", children: null, }, { name: "1-2-1-2", key: "1-2-1-2", lable: "1-2-1-2", children: [], }, ], }, { name: "1-2-2", key: "1-2-2", lable: "1-2-2", children: [], }, { name: "1-2-3", key: "1-2-3", lable: "1-2-3", children: [], }, ], }, ]) as any; return { treeData } }
使用:
<!-- * @Date: 2022-10-27 15:46:26 * @LastEditors: zhangsk * @LastEditTime: 2022-11-16 11:24:47 * @FilePath: \basic-demo\src\pages\index.vue * @Label: Do not edit --> <template> <div class="container"> <h1>hello,World!</h1> <!-- 公用组件使用 --> <CalculateVue v-model:value-one="form2.valueOne" v-model:value-two="form2.valueTwo" v-model:selected="form2.selected" @calculate="calculateFun" ></CalculateVue> <div>{{ form.valueOne }} -{{ form.selected }} - {{ form.valueTwo }}</div> <div>计算结果:{{ result ? result : "-" }}</div> <!-- 树组件 --> <TreeVue :data="treeData"></TreeVue> <!-- 透传属性 --> <AttributeBoxVue class="woshi" v-bind="attributes" :arr="['1', '2', '3']" ></AttributeBoxVue> <!-- 插槽 --> <SlotBoxVue title="我是父组件传递的标题"> <template #default="{ text }"> {{ text }}</template> <template #footer></template> </SlotBoxVue> <!-- 动态组件 --> <DynamicComponentVue :components-arr="componentsArr" :form="form" ></DynamicComponentVue> </div> </template> <script lang="ts" setup> import CalculateVue from "@/components/common/Calculate.vue"; import TreeVue from "@/components/Tree/index.vue"; import AttributeBoxVue from "@/components/common/AttributeBox.vue"; import SlotBoxVue from "@/components/common/SlotBox.vue"; import DynamicComponentVue from "@/components/common/DynamicComponent.vue"; // 使用组合式函数 import useCalculateData from "./data/calculate"; import useTreeData from "./data/tree"; import useAttributeData from "./data/attribute"; import useDynamicData from "./data/dynamic"; // 计算组件 const { form2, result, calculateFun } = useCalculateData(); // 树数据 const { treeData } = useTreeData(); // 透传属性 const { attributes } = useAttributeData(); // 动态组件 const { form, componentsArr } = useDynamicData(); </script> <style lang="scss" scoped></style>
大功告成!效果:
结束了。使用方法就是这样,如果两个组合式函数直接有联系的话,直接引入使用即可。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。