composition 相关问题

包装第三方组件时，可以使用“v-bind=$attrs”自动传递props和emits。 childComponent 的公开如何像他们一样自动传递？ // 子组件包装第三方组件时，可以使用“v-bind=$attrs”自动传递props和emits。 childComponent 的暴露如何像他们一样自动传递？ // ChildComp <script setup lang="ts"> import { PropType } from 'vue'; defineProps({ name:String, list:Array as PropType<any[]>, }) defineEmits(['change', 'delete']) defineExpose({ method1:()=>{ //... }, method2:()=>{ //... }, method3:()=>{ //... }, method4:()=>{ //... }, ... }) </script> // MyComp <template> <--! others --> <ChildComp v-bind="$attrs"/> </template> <script setup lang="ts"> import ChildComp from './ChildComp.vue' defineExpose({ myMethod:()=>{ //... } }) // method1,method2,method3,method4... of ChildComp // How to expose all? </script> 自动暴露子组件传递

vuejs3 composition

回答 0 投票 0

Vue 3 中单个脚本标签内的多个可组合实例

我目前正在重写当前使用 Options API 编写的组件。从代码剪切的角度来看，重写的一个有趣的点是我们的许多模态，它们都......

javascript vue.js vuejs3 composition vue-composition-api

回答 1 投票 0

Vue 组合 api 反应式属性

在使用 typescript 的 vue 3 项目中，我有两个属性区域设置和内容：从“vue”导入{计算，参考} 从“vue-i18n&...</desc>导入{useI18n}” <question vote="0"> <p>在使用 typescript 的 vue 3 项目中，我有两个属性 <pre><code>locale</code></pre> 和 <pre><code>content</code></pre> :</p> <pre><code><script setup lang="ts"> import { computed, ref } from 'vue' import { useI18n } from "vue-i18n" import { Landing, Locales } from "@types"; interface Props { item: Landing; } const props = defineProps<Props>(); const i18nLocale = useI18n(); const locale = computed(() => { return i18nLocale.locale.value as unknown as Locales }) const content = computed(() => { return props.item.content[locale.value] }) // const locale = ref(i18nLocale.locale.value as unknown as Locales); // const content = ref(props.item.content[locale.value]); </script> </code></pre> <p>当 i18nLocale.locale.value 更新时，我计算的区域设置会发生变化，我的内容也会发生变化。这很好用。</p> <p>但是，如果我使用 <pre><code>ref()</code></pre> 对注释行执行相同操作，则不会更新任何内容，需要使用计算，这是一个好方法吗？</p> </question> <answer tick="false" vote="0"> <p>注释行声明带有初始值的引用。虽然这些引用可以手动更改，但它们没有对数据源的引用，并且无法对它们的更改做出反应。</p> <p>但是，您不需要 <pre><code>locale</code></pre> 的计算属性，因为 <pre><code>i18nLocale.locale</code></pre> 已经是一个引用。您可以直接使用它，或者，如果您想省略 <pre><code>i18nLocale</code></pre>，请将其分配给变量：</p> <pre><code>const locale = i18nLocale.locale </code></pre> <p>但是 <pre><code>content</code></pre> 必须是计算属性，因为当依赖项发生变化时，必须重新计算它的值（<pre><code>locale</code></pre> 和 <pre><code>item.content</code></pre>）。</p> </answer> </body></html>

typescript vue.js composition

回答 0 投票 0

依赖和组合之间的区别？

定义取自此处依赖性类的结构或行为的变化会影响其他相关类类，那么这两个类之间存在依赖关系。它需要不是...

java oop dependencies uml composition

回答 4 投票 0

使用相关数据正确设计微服务依赖关系

这是一个理论性很强的问题，主要集中在我没有完全掌握微服务中相关数据背后的设计原则以及获取相关数据的责任。基础...

dependencies microservices composition

回答 1 投票 0

扩展类与隐式类有何不同？

我正在尝试了解子类（子类扩展父类）和隐式类（隐式类子类（a：父类））之间的区别在这两种情况下，子实例都能够访问

scala inheritance composition implicit-class

回答 2 投票 0

在 Scala 中将成员函数调用与其他函数调用结合起来的惯用方法是什么？

假设我们在 Scala 中有一个对象（例如一个列表），我们想用对象成员函数对用户定义的函数进行排序，例如： g(l.map(f) .foldRight(...)) .map(h) 如果

scala function composition method-call sequencing

回答 1 投票 0

如何在 Python 中创建一个（或多个）对象列表作为类的属性？

我正在尝试将组合原理应用于类之间的关系。所以我需要创建一个特定类的实例（对象）列表作为它“con ...

python list class object composition

回答 0 投票 0

UML 类图关系和字段可见性的问题

在查看了许多信息源后，我对我的设计有几个问题。我决定将 User 和 UserSettings 类与组合关系链接起来（因为用户设置...

uml visibility composition class-diagram class-design

回答 1 投票 0

Fetch API 与 Vue Composition API（脚本设置）

我很困惑。我想要一个简单的通用获取函数来从基础上学习它，但我想使用 Vue Composition API 和脚本设置来完成它。这是我的脚本：进口{参考...</desc> <question vote="0"> <p>我很困惑。我想要一个简单的通用获取函数来基本学习它，但我想用 Vue Composition API 和脚本设置来完成它。</p> <p>这是我的剧本：</p> <pre><code><script setup> import {ref} from 'vue'; const boredInfo = ref(null) function theData(url) { fetch(url) .then(response => response.json()) .then(actualData => { console.log(actualData) boredInfo.value = actualData }) .catch((e) => { console.error('Das ist der Catch Error: ', e) }) return boredInfo } theData('https://www.boredapi.com/api/activity') </script> </code></pre> <p>这是我的模板</p> <pre><code><template> <h1>Lets go!</h1> <div> <h1>Aktivität: {{boredInfo.activity}}</h1> </div> </template> </code></pre> <p>我得到的错误：</p> <pre><code>ypeError: Cannot read properties of null (reading 'activity') </code></pre> <p>JSON我得到</p> <pre><code>{ "activity": "Make your own LEGO creation", "type": "recreational", "participants": 1, "price": 0, "link": "", "key": "1129748", "accessibility": 0.1 } </code></pre> <p>就这么简单......在整个互联网上，我找不到脚本设置、获取 API 和显示值的解决方案。</p> <p>但最让人迷惑的是：它显示了价值！那么为什么会出现这个错误呢？</p> </question> <answer tick="false" vote="0"> <p>我想你忘记了下面的代码：</p> <pre><code><template> <h1>Lets go!</h1> <div> <h1>Aktivität: {{boredInfo.activity}}</h1> </div> </template> </code></pre> <p>在你的api调用完成之前它已经调用了。所以...简单的解决方案是您可以在 div 或 h1 中添加 <strong>v-if</strong> 以检查变量是否已由 api 响应填充。这是主要问题，所以它可以更多样化的解决方案取决于你的。</p> </answer> <answer tick="false" vote="0"> <p>问题是您在获取完成之前访问<pre><code>boredInfo.activity</code></pre>，而<pre><code>boredInfo</code></pre>仍然只是<pre><code>ref(null)</code></pre>.</p> <p>要么用预期的结构初始化它，即</p> <pre><code>const boredInfo = ref({activity: null}) </code></pre> <p>或避免过早访问<pre><code>v-if</code></pre>，表达式中的三元，可选链接（<pre><code>?.</code></pre>）等。像：</p> <pre><code><h1 v-if="boredInfo !== null">Aktivität: {{boredInfo.activity}}</h1> </code></pre> <p>您可以在加载时显示加载微调器，这总是很好。</p> </answer> <answer tick="false" vote="0"> <p>我想解释为什么你会收到错误<pre><code>Cannot read properties of null (reading 'activity')</code></pre></p> <p>首先，您试图访问一个在安装组件时不存在的属性，<pre><code>activity</code></pre> 属性在 <pre><code>boredInfo</code></pre> 对象中不存在，因此当组件被渲染时它不会期望任何东西想要加载该属性。</p> <p>我们可以通过两种方式解决这个问题，第一种方式很简单，在<pre><code>const boredInfo = ref()</code></pre>中添加属性名称，就像这样：</p> <pre><code>const boredInfo = ref({ activity: '' }); </code></pre> <p>此设置将绕过错误。</p> <p>另一个选项是在数据尚未加载时添加加载，这意味着它将等待我们的<pre><code>theData</code></pre>方法解析，首先定义一个新变量来指示加载状态：</p> <pre><code>const isLoading = ref(true); </code></pre> <p>然后我们将使用 async/await 等待<pre><code>fetch</code></pre> 方法生成的承诺，然后将加载值更改为 false，因为将加载所有数据：</p> <pre><code>async function theData(url) { try { isLoading.value = true; const response = await fetch(url); const actualData = await response.json(); boredInfo.value = actualData } catch(e) { console.error('Das ist der Catch Error: ', e) } finally { isLoading.value = false; } }; </code></pre> <p>然后我们用<pre><code>v-if</code></pre>配置我们的模板等待<pre><code>isLoading</code></pre>为假，显示api的返回值：</p> <pre><code><template> <h1>Lets go!</h1> <div v-if="!isLoading"> <h1>Aktivität: {{ boredInfo.activity }}</h1> </div> </template> </code></pre> <p>就是这样！</p> <p>您可以在<a href="https://sfc.vuejs.org/#eNp9UlFu2zAMvQqrHydAYmO/mVugWPcxoEfQj+rQiTpbEijaQWD4NrvJLjbKjp1uA/qTiH7ke+QjB/UcQt53qA6qjBXZwBCRu/CknW2DJ4YBCOud/JiKbY8wQk2+hUyKsq/aaVd5FxlsfPXmaN0JHlPBhqnDreAz+uYJjz9c7W/ooB3ARGj5eoAs025M2dqZeHUV1J0T0DvgM74YNpuOmi1MVUzX+QF3zbw3TYfCnVSFJoGzMGEM8kiYuRjLUCNX54nurzzppTNNklozl9L8PXq3WdLXSVbNe2nKGKEySQFv7c4CvsEciTxtshcTpXGGIxJ8S6nwPQFiwg5wO1PU1pmm+WTO2jRxHnQU5ybjFqeyM3OIh6K4XC751K0JNq98W8h/sXieiVJZzBuXXUvA2IbGMKaIy/OXp1fkCCf/UBYSJKnyaHvo97Z+1Oph7UmrCRRY0p5/TvS/f/EBhuGDWYsujOOdrxBCeZXFqq12aj67fWvCZLwc5uSCvgFRK6GeFbWSI0yxVsvQsa7SOb/H3NOpkFdOnWPbiv2x3b+Rv0QkIdZq94GjkI890p7QyVqQPuP8J/U/3mUpavwDvJ0o4A==" rel="nofollow noreferrer">这里看到现场示例</a></p> </answer> </body></html>

vue.js installation fetch composition

回答 0 投票 0

如何从提供的基类和额外提供的混合行为中创建扩展的 ES6 类构造函数？

我尝试根据这里描述的思路写了一个mixin函数用于继承。方法混入非常简单，但我正在为构造函数混入而苦苦挣扎。我试着写一个函数，它...

javascript mixins composition extends es6-class

回答 1 投票 0

Python 不建议可用的方法和属性

我正在学习 Python OOP 和 Composition。在这个实验中，我创建了 2 个类，第一个帐户类，它为用户维护存款、取款、信息等功能。我还创建了 Bank ...

python oop autocomplete pycharm composition

回答 0 投票 0

composition 相关问题

最新问题