随笔分类 - vue / vue3
摘要：vue3-setup中如何通过ref调用子组件的函数 子组件通过defineExpose向外导出需要调用的函数 在父子间中定义ref引用来调用 子组件关键代码： <script setup> import { ref, reactive, defineExpose } from 'vue' cons
阅读全文
摘要：### 简单案例 ``` watch deep obj:{{obj}} 调用watch次数:{{times}} 改变对象 ``` 
阅读全文
摘要：这里fileChange第二个参数，不可也用fileList会污染已经定义的响应式变量fileList <script setup> const fileList = ref([]) const fileChange = (file,fileList) => { fileList.value = f
阅读全文
摘要：Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or compute
阅读全文
摘要：（1）vuex是什么？怎么使用？哪种功能场景使用它？ vue框架中状态管理。在main.js引入store，注入。新建一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车 （2）vuex有哪几种属性？ 有五种，分别是 State、 Gette
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-for</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <
阅读全文
摘要：在 Vue.js 中，computed 是一种计算属性，它能够根据依赖的数据动态计算出一个新的值。 computed 属性可以定义为一个函数，该函数返回需要计算的值。 当它所依赖的数据发生变化时，Vue.js 会自动重新计算这个值并将其更新到组件上。 ### computed 与watch，meth
阅读全文
摘要：这里msg的效果,在app.mount('#box')后就被覆盖掉了 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"> 这里msg的效果,在app.mo
阅读全文
摘要：var user = { id : 1, name : 'Tom', age : 10, school : 'primary school', sister:{ name:'Alice', age:12 } } var handler = { get(target,prop){ if(prop ==
阅读全文
摘要：在 Vue3 中，proxy 是一种新的 JavaScript 特性，用于创建一个代理对象，对代理对象的访问会通过 get 和 set 等方法拦截， 从而可以对代理对象进行一些自定义的处理逻辑。在 Vue3 中，我们可以使用 reactive 函数将一个普通对象转换成响应式对象， 而这个响应式对象就
阅读全文
摘要：在vue3中可以通过app.config.globalProperties来挂载全局方法。 main.js const app = createApp(App) // 定义全局方法 const myGlobalMethod = () => { console.log('This is a globa
阅读全文
摘要：因为单独提交才好触发el-upload中的on-success函数 在 Vue 3 中，可以通过 ref 引用指向 upload 组件，然后使用该引用调用 upload 的 submit 方法来触发上传操作。具体实现如下： <template> <el-upload ref="uploadRef"
阅读全文
摘要：一个简简单单的案例 app.vue <template> <div> app <Second/> </div> </template> <script> import { provide } from 'vue'; import Second from './components/Second.vu
阅读全文
摘要：![](https://img...
阅读全文
摘要：setup 是 Vue3 中引入的一个新的选项，用于替代 Vue2 中的 beforeCreate 和 created 钩子函数。 setup 选项是一个函数，它在组件实例被创建之前执行，并返回一个包含状态和方法等配置信息的对象。 具体来说，setup 选项的作用包括： 响应式数据：使用 Vue3
阅读全文
摘要：在组件中使用 Pinia 状态管理： <template> <div> <p>当前计数：{{ count }}</p> <button @click="increment">增加</button> <button @click="decrement">减少</button> </div> </tem
阅读全文
