vue常用业务场景

vue3：

使用本地存储

import { useStorage } from '@/hooks/web/useStorage'
const { getStorage, setStorage, removeStorage } = useStorage()

setStorage("data", data); // 可为对象

使用pinia

(1)state: ({isDisableSwitch: false})
(2)
getters: 
getIsDisableSwitch(): boolean {
  return this.isDisableSwitch
}
(3)
actions：
setIsDisableSwitch(state: boolean): void {
  this.isDisableSwitch = state
}

父组件给子组件传递数据

（只传属性）
首先：
1、添加属性

<TemplateCard :templateId="template_Id" />

2、在子组件中添加，去使用

const props = defineProps({
  templateId: { type: Number, default: 0 } // 模板id
})

传方法

直接通过ref调用子组件的方法

<TemplateCard ref="templateCardRef" />

子组件给父组件传递数据

传方法

emit
1、子组件用

emit('query', data)

2、父组件获取数据

<TemplateCard @query="getData" />