xiezhuangshunv-优快云博客

原创 20250418-vue-作用域插槽

父组件中，插槽的内容无法访问到子组件的状态。然而在某些场景下，插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。当需要接收插槽 props 时，默认插槽和具名插槽的使用方式有一些小区别。子组件代码父组件代码子组件传入插槽的 props 作为了 v-slot 指令的值，可以在插槽内的表达式中访问。

2025-04-25 11:06:00 266

原创 20250417-vue-动态插槽名

【代码】20250417-vue-动态插槽名。

2025-04-18 13:02:51 230

原创 20250417-vue-条件插槽

在下面的示例中，我们定义了一个卡片组件，它拥有三个条件插槽：header、footer 和 default。有时候我们需要根据内容是否被传入了插槽来渲染某些内容。你可以结合使用 $slot 属性与 v-if 来实现。

2025-04-17 16:49:12 323

v-slot 有对应的简写 #，因此 <template v-slot:header> 可以简写为 <template #header>。当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容。在父组件中使用 <BaseLayout> 时，我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。这类带 name 的插槽被称为具名插槽。有时在一个组件中包含多个插槽出口是很有用的。现在 <template> 元素中的所有内容都将被传递到相应的插槽。

2025-04-17 09:40:51 335

原创 20250415-vue-插槽-默认内容

现在，当我们在父组件中使用 <SubmitButton> 且没有提供任何插槽内容时，Submit 将会作为默认内容渲染。在外部没有提供任何内容的情况下，可以为插槽指定默认内容。但如果我们提供了插槽内容，那么显式提供的内容会取代默认内容。

2025-04-15 16:14:54 272

原创 20250414-真实代码-自定义组件-custom-position-block

auto表示让浏览器自己选择一个合适的外边距。

2025-04-15 15:37:24 121

原创 20250414-插槽-渲染作用域

插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，这和 JS 的词法作用域规则是一致的。换言之：父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。这里的两个 {{ message }} 插值表达式渲染的内容都是一样的。

2025-04-14 09:42:45 214

原创 20250411-vue-插槽内容与出口

现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。<slot> 元素是一个插槽出口(slot outlet)，标示了父元素提供的插槽内容(slot content)将在哪里被渲染。通过使用插槽，<FancyButton> 仅负责渲染外层的 <Button> 以及相应的样式，而且内部的内容由父组件提供。在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。插槽内容可以是任意合法的模板内容，不局限于文本。该方法必须被两个反单引号 ` 包裹。

2025-04-14 09:24:04 207

原创 20250410-透传Attributes1

今天工作中遇到的一个问题，在电脑上跑正常，在手机上月份不是两位数的，就会出现问题。电脑上 JS 有容错，手机没有，于是这么处理。

2025-04-10 15:49:21 329

原创 20250409-多个v-model绑定

子组件改成另一种方式。

2025-04-09 10:23:23 192

原创 20250409-v-model的参数

在这种情况下，子组件应该使用 title prop 和 update:title 事件来更新父组件的值，而非默认的 modelValue prop 和 update:modelValue 事件。

2025-04-09 09:23:44 175

原创 20250407-组件v-model

另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性。1、将内部原生<input>元素的 value attribute 绑定到 modelValue prop。2、当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件。在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。v-model 可以在组件上使用以实现双向绑定。

2025-04-08 13:47:59 459

原创 20250401-vue-声明触发的事件

这个 emits 选项和 defineEmits() 宏还支持对象语法。注意如果一个原生事件的名字 (例如 click) 被定义在 emits 选项中，则监听器只会监听组件触发的 click 事件而不会再响应原生的 click 事件。

2025-04-01 16:18:48 215

原创 20250401-vue-事件参数

所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说，$emit('foo', 1, 2, 3) 触发后，监听器函数将会收到这三个参数值。有时候我们会需要在触发事件时附带一个特定的值。

2025-04-01 10:53:37 205

原创 20250331-vue-组件事件1触发与监听事件

和原生DOM事件不一样，组件触发的时间没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案。像组件与 prop 一样，事件的名字也提供了自动的格式转换。像3中的代码也可以这样写。父组件代码不变，子组件代码如下。这样点击效果就只会出现一次。

2025-03-31 10:06:50 457

原创 20250317-vue-Prop4

另外，type 也可以是自定义的类或构造函数，Vue 将会通过 instanceof 来检查类型是否匹配。Vue 会通过 instanceof Person 来校验 author prop 的值是否是 Person 类的一个实例。

2025-03-24 09:15:15 282

原创 20250314-vue-Props3

/ 自定义类型校验函数// 完整的 props 作为第二个参数传入propG: {},

2025-03-14 15:40:32 669

原创 20250312-vue-Props2

所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。另外，每次父组件更新后，所有的子组件中的 props 都会呗更新到最新值，这意味着你不应该在子组件中去更改一个 prop。导致你想要更改一个 prop 的需求通常来源于以下两种场景：1. prop 被用于传入初始值；而子组件想在之后将其作为一个局部数据属性。

2025-03-12 16:46:45 252

原创 20250311-vue-Props1

一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute。对于以对象形式声明的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。比如，如果要求一个 prop 的值是number类型，则可使用Number构造函数作为其声明的值。对象形式的 props 声明不仅可以一定程度上作为组件的文档，而且如果其他开发者在使用你的组件时传递了错误的类型，也会在浏览器控制台中抛出警告。

2025-03-11 16:07:48 390

原创 20250311-vue组件注册

一个 Vue 组件在使用前需要先被注册，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

2025-03-11 09:57:58 293

原创 20250310-组件基础2

我们期望能渲染成这样：使用 <slot> 作为一个占位符，父组件传递进来的内容就会渲染在这里。

2025-03-10 14:14:30 143

原创 20250307-vue组件基础1

点击了 {{ count }} 次.

2025-03-07 17:15:56 1044

原创 20250307-vue侦听器

当我们需要在状态变化时执行一些 “副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。我们可以使用 watch 选项在每次响应式属性发生变化时触发一个函数。‌是指那些能够在被修改时自动更新视图的属性)

2025-03-07 13:19:04 1135

原创 20250304vue-事件处理

使用 v-on 指令(简写为 @)来监听 DOM 事件。用法：v-on:click="handler" 或者 @click="handler".handler 可以是内联事件处理器，也可以是方法事件处理器。方法事件处理器。

2025-03-04 16:53:30 772

原创 20250102——v-for

公司项目的安卓和iOS端又一个版本做完了，应该也是最后一次更新了，终于有时间继续学uni-app了。我们可以使用 v-for 指令基于一个数组渲染一个列表。在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.values() 的返回值来决定。

2025-01-02 17:17:19 299

原创 20241112继续做公司uniapp项目-学习

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。交叉轴对齐：弹性项目可以在交叉轴上进行对齐，包括顶部对齐、底部对齐、居中对齐等，使用align-items属性定义交叉轴对齐方式。子元素的弹性项目：弹性容器中的每个子元素都成为弹性项目。主轴对齐：弹性项目可以在主轴上按照一定比例分配空间，也可以使用justify-content属性定义主轴的对齐方式。space-around:每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.

2024-11-13 08:45:47 565

原创 20241111继续学习vue

在 Vue 中，默认情况下，状态是深度响应的。和组件实例上的其他属性一样，方法也可以在模板上被访问。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的。上定义，直接向组件实例添加新属性，但这个属性将无法触发响应式更新。Vue 在组件实例上暴露的内置 API 使用。有状态方法, 这个公司项目好像没用到.它同时也为内部属性保留。上使用任何以这些字符作前缀的属性。此选项的值应为返回一个对象的函数.选项来声明组件的响应式状态.因此，你应该避免在顶层。要为组件添加方法，我们需要用到。

2024-11-11 17:23:10 346

原创 20241107继续学习vue

在此示例中, 当 eventName 的值是 "focus" 时, v-on:[eventName] 就等价于 v-on:focus.会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性。修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。上面应该就是把属性 attributeName 绑定到 url 上.遇到这么个语法,没看懂,继续学吧。，那么这个绑定就等价于。指令对触发的事件调用。

2024-11-08 17:07:34 255

原创 20241106继续学习vue

也就是一段能够被求值的 JavaScript 代码。的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如。如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。绑定在表达式中的方法在组件每次更新时都会被重新调用，因此。，那么该 attribute 将会从渲染的元素上移除。选项所定义的属性都会暴露在函数内部的。

2024-11-06 17:18:26 191

原创 20240924uniapp学习工作-vue

下面这段代码, 当你在赋值后再访问 this.someObject, 此值已经是原来的 newObject 的一个响应式代理, this.someObject 是代理, newObject 是被代理的, 所以它俩肯定不一样.这些实例上的属性仅在实例首次创建时被添加, 因此你需要确保它们都出现在 data 函数返回的对象上. 若所需的值还未准备好, 在必要时也可以使用 null、undefined 或者其他一些值占位.此对象的所有顶层属性都会被代理到组件实例.之前学的vue基本忘光了, 重新开始吧.

2024-11-06 13:58:13 427

原创 20241010uniapp学习工作-安卓easyphoto第三方选图片慢问题解决

这是个超长的方法, 代码很多, 我又一次预设这玩意我看不懂, 就算看懂了, 它这是一下子把图片加载进来, 改为分批加载很难, 就算改好了怎么分批显示也好难.虽然领导没说什么, 我真实羞愧的无地自容, 我至少应该定位到这个循环, 再去找领导支持的. 结果东冲西撞绕来绕去, 还牢骚满腹, 问题还丝毫没得到解决.这块会不会导致慢, 这就不是我能看出来的, 可能打断点也试不出来, 因为这段代码不循环的话应该也不慢.于是我上来就预设, 这个问题我很可能改不好, 这是个超级大难题, 需要很长时间, 最终也未必有结果.

2024-10-10 11:19:24 528

原创 20241009uniapp学习工作-安卓文件路径问题

使用内部存储空间中的目录保存其他应用不应访问的敏感信息。应用专属外部存储空间目录: 这些目录既包括用于存储持久性文件的专属位置, 也包括用于存储缓存数据的其他位置. 其他应用可以在具有适当权限的情况下访问这些目录, 但存储在这些目录中的文件仅供你的应用使用. 如果你明确打算创建其他应用能够访问的文件, 你的应用应改为将这些文件存储在外部空间的共享存储空间部分.如果数据仅供你的应用使用, 应使用应用专属存储空间. 对于可分享的媒体内容, 应使用共享的存储空间, 以便其他应用可以访问相应内容.

2024-10-09 17:21:28 1094

原创 20240925uniapp学习工作-安卓问题

安卓问题目前还有扫条码每次返回结果不一样问题,扫模糊条码识别慢问题,选择图片返回路径问题……真是太讨厌安卓开发了。修改主工程build.gradle(:app),添加packagingOptions节点。上面这些操作都是为了使用新的安卓图片选择器, 因为之前测试Intent的方式一直不好用.在 build.gradle(:app) 的 dependencies 里加上。因为公司的测试机是不知道啥年的格力手机……结果, 下午用自己手机测, 发现没问题.这个从1.0.0升级到1.7.0报错。

2024-09-25 16:32:59 748

原创 20240923uniapp学习工作-vue

在上面的示例代码中，我们定义了一个目标对象target，并使用Proxy对象包装它。然后，我们定义了一个handler对象，它包含了get和set方法，用于拦截对象的读写操作。在get方法中，我们输出了被读取的属性名称，并返回属性值。在set方法中，我们输出了被写入的属性名称和值，并将值写入目标对象。最后，我们使用proxy对象读取了目标对象的name属性，并将其输出到控制台。然后，我们使用proxy对象将目标对象的age属性设置为21，并将设置的过程输出到控制台。安卓开发又出奇怪的问题.搞了差点一天.

2024-09-23 17:11:12 370

原创 20240920uniapp学习工作-vue

这里的 attributeName 会作为一个 js 表达式被动态执行, 计算得到的值会被用作最终的参数.绑定style时, 且文本无法选择绑定selectable, 颜色恢复, 文本可以选择学习前端最好的方法还是实测.eventName 可以是 focus, click 或自定义事件.动态参数表达式因为某些字符的缘故有一些语法限制, 比如空格和引号, 在 HTML attribute 名称中都是不合法的.如果你需要传入一个复杂的动态参数, 推荐使用计算属性替换复杂的表达式. 计算属性后面学.

2024-09-20 17:24:37 941

原创 20240919uniapp学习工作-自定义控件

data() 函数用于定义组件的状态, vue在组件的初始化阶段会调用 data() 函数获取数据对象, 并进行响应式处理, 这是实现数据绑定和响应式更新的基础.export default 用于到处模块, 允许将一个模块中的内容默认到处, 使得其他模块可以通过 import 语句导入这个默认导出的内容.安卓又出问题, 又是某个品牌某个人的手机出问题, 然后自己这边几个测试机都无法重现的问题.继续看template中最后一段, 也没什么看不懂的了, 这都是学习的效果.燃后这段代码就没什么不懂的了.

2024-09-19 16:48:42 201

空空如也

空空如也