vue-component 相关问题

我在一个组件（组件 A）中使用带有的组合 API，并希望从另一个文件扩展组件（组件 B）以在组件 A 中使用该组件方法。 </desc> <question vote="0"> <p>我在一个组件（组件 A）中使用带有 <pre><code><script setup></code></pre> 的 Composition API，并希望从另一个文件扩展组件（组件 B）以在组件 A 中使用该组件方法。</p> <p>问题陈述<strong>：</strong>当我尝试访问方法时，它给了我这个错误。</p> <blockquote> <p>未捕获（承诺中）类型错误：ComponentB.hello 不是函数</p> </blockquote> <p><strong>A组份：</strong></p> <pre><code><script setup lang="ts"> import ComponentB from '..path/ComponentB'; ComponentB.hello(); </script> </code></pre> <p><strong>B组份：</strong></p> <pre><code>export default defineComponent({ methods: { hello(): void { console.log('Hello'); } } }); </code></pre> <p><strong><pre><code>What I tried so far ?</code></pre></strong></p> <p>我尝试在组件 A 中同时使用 <pre><code><script lang="ts"></code></pre> 和 <pre><code><script setup lang="ts"></code></pre> 并像这样扩展组件 B。但我不知道如何访问 <pre><code>hello()</code></pre> 中的 <pre><code><script setup></code></pre> 方法。</p> <p><strong>A组份：</strong></p> <pre><code><script lang="ts"> import ComponentB from '..path/ComponentB'; export default defineComponent({ extends: ComponentB }); </script> <script setup lang="ts"> // Do not know how to access ComponentB hello method here. </script> </code></pre> </question> <answer tick="false" vote="0"> <ol> <li>组件可以通过 <pre><code>defineExpose()</code></pre> 宏公开其方法/属性。</li> <li>要调用公开的方法，您应该有一个组件实例，因此该组件应该包含在模板中。</li> <li>要引用模板中的组件，请使用 <pre><code>ref</code></pre> 属性并在 <pre><code>script setup</code></pre> 中声明具有相同名称的引用：</li> </ol> <p><a href="https://play.vuejs.org/#eNp9Uk1Pg0AQ/SvrxoQ2qXDordJG2zRRD2rUxMteWhgo7bJLdpdKQvjvzi6lYKyeYOe9mffmo6b3ReEfS6AzGupIZYUhGkxZLJjI8kIqQ2qiICENSZTMiYdU7wytJH4FCLM8oX7Qh2xV75YJJiIptCG5Tsnc1hp5D8C5JJ9S8fjKG3eE6+0JH7usMGj9oBN8GMgLvjGAL0LCqFO52dqMOaPXW0aDFtyWxkhB7iKeRQcH+TsrOEIHY0YXqw3nA+uzWY+GQZuMhcJgIEkn1Gh0mWSpv9dS4LRqq8WodZJxUC+FybALRmfEIRZDHfn15GJGlTDp4tEOosOF+F5XNsboqwIN6giMnjGzUSmYFl6/P0OF/2cwl3HJkf0P+AZa8tJ6bGnLUsRoe8Bzbh/dYjORfuh1ZUDorilr1DIbx2cUl2tH+Ffrvd2pP3V5TDQ4xZ/nceHomIghyQSsq0JqGLmC/X5q0gpsUNa4CJ5KW/zX0fQnM1glbb4BkHj9wQ==" rel="nofollow noreferrer">Vue SFC 游乐场</a></p> <p>成分A：</p> <pre><code><script setup> import { ref } from 'vue' import ComponentB from './ComponentB.vue'; const msg = ref('Hello World!') const $b = ref(); </script> <template> <component-b ref="$b"/> <button @click="$b.hello(msg)">Call ComponentB::hello(msg)</button> </template> </code></pre> <p>组件B：</p> <pre><code><script setup> defineExpose({ hello(msg){ alert(msg); } }); </script> <template></template> </code></pre> </answer> </body></html>

vuejs3 vue-component vue-composition-api vuejs3-composition-api

回答 0 投票 0

Vuetify 2 自动完成 - 按名字和姓氏搜索整个姓名

我正在使用 vuetify 2 中的自动完成组件我的应用程序返回一个全名数组，例如： [“安德烈·拉马略·罗德里格斯”、“若阿金·德·阿尔梅达”、“菲利普·若阿金·阿尔梅达”] 自动完成

javascript vue.js vuejs2 vue-component vuetify.js

回答 1 投票 0

是否可以调整 vuetify 组件的大小？

最近使用Vuetify实现了一些UI设计。但是，我发现默认的输入组件（例如 v-text-field、v-select）太大。我发现我可以调整它们的宽度，但是......

vue.js vue-component vuetify.js

回答 5 投票 0

如何连接Vue.js 3到Laravel 10项目，发送数据到Vue组件

我是编程初学者，所以我在将这两件事连接在一起时遇到问题。我了解它们如何单独工作，但我想为我的宠物项目添加反应性。我试过这个...

laravel vue.js vuejs3 vue-component laravel-10

回答 1 投票 0

如何在vue3中通过装饰器使用vuelidate

下午好！我试图在 vue3 中使用 vuelidate 和 vue-faceing-decorator，但我没有成功。在 vue2 中，我可以根据下面的代码在 @Componet 中调用 vuelidate，但在 vue3 中这样做......

vue.js vuejs3 vue-component vue-composition-api vue-property-decorator

回答 1 投票 0

如何在不使用 !important 选项的情况下覆盖组件中的 TailwindCSS 实用程序类？

例如，假设你有一个这样的组件（以 VueJS 为例）：例如，假设你有一个这样的组件（以 VueJS 为例）：  <template> <div class="px-5"> <slot></slot> </div> </template> 当你实际调用它时，你想用 px-5 类覆盖 px-10 ，如下所示： <template> <Container class="px-10"> <template> 上面的方法不起作用，因为 px-5 是先写的，已经设置了该属性......所以默认情况下 px-5 获胜。我不想写!px-10，因为我从各种来源听说使用!important标签不是一个好的做法。如何在不使用 !important 的情况下使上述示例正常工作？从我自己的研究来看，tailwind-merge似乎是迄今为止最好的解决方案。如何使用它（使用Vue 3）： <template> <div :class="twMerge('px-5', $attrs.class')"> <slot></slot> </div> </template> <script setup> import { twMerge } from 'tailwind-merge' </script>

components vue-component tailwind-css

回答 1 投票 0

带有 vue 3 的 Web 组件 - 未添加样式

我想将我在 vue 项目中使用的一些组件导出为 web 组件，以便能够在其他非 vue 项目中使用它们。我看到vue对此有支持，并且它导出了web-

webpack vue-component vuejs3 web-component

回答 1 投票 0

Vue 将 v-bind 与对象一起用于多个 props。如何使用.prop修饰符

我使用具有多个道具的组件。这是我的代码并且运行良好常量值 = { 文本：“a”，值：“b” } const text = '一些文本'; 我使用具有多个道具的组件。这是我的代码，效果很好 const val = { text: 'a', value: 'b' } const text = 'some text'; <template> <some-component :myVal.prop="val" :someText="text" /> </template> 我想使用 v-bind 组合它我必须使用 .prop 修饰符将对象/数组 prop 传递给 Web 组件。（https://vuejs.org/api/built-in-directives.html#v-bind）所以我尝试这样。 const multipleProp = { 'myVal.prop': { text: 'a', value: 'b' }, someText: 'some text' } <template> <some-component v-bind="multipleProp" /> </template> 但是它不起作用。而且我在“some-component”中有很多 props，所以我想使用一个 v-bind。在这种情况下如何使用one v-bind？使用解构： const { myVal, ...rest } = multipleProp <some-component v-bind={rest} :myVal.prop="myVal" />

vue.js vuejs2 vuejs3 vue-component

回答 1 投票 0

如何在 Vue 3 组合 API 中加载此动态组件？

我尝试加载一个具有从数据库中获取的名称的组件，但它不断向我发送错误 [Vue warn]：组件缺少模板或渲染函数。从...导入简单问题

javascript vue.js vuejs3 vue-component

回答 1 投票 0

如何在Vue和Laravel中加载外部CSS、js

我在我的组件中创建了 vue 布局，但我有问题。实际上，我在我的 laravel 项目中使用 vue3 和 Breeze 库。我的模板需要一些 js 和 css 文件，我像这样导入

laravel vue.js templates vuejs3 vue-component

回答 1 投票 0

使用defineModel宏不会触发Vue.js中的状态更新

请在下面的链接中找到我试图在 Vue 中实现的事物类型的最小示例。 Vue SFC Playground 链接在我的实际应用程序中，我在我的st中维护了几条数据...

javascript vue.js vuejs3 vue-component store

回答 1 投票 0

为什么会出现“不允许不规则空格”的错误以及如何解决？

我有标记两个标记，如下代码所示，然后我运行后得到“错误不规则空白不允许无不规则空白”。我该如何修复？ <... 我有 <p> 标记两个标签，如下代码所示，然后我运行后得到 "error Irregular whitespace not allowed no-irregular-whitespace"。我该如何修复？ <div> <p>Ankjjdhd asas a sds qwe vsdf fsf ewth lioy nfhfgh</p> <p>sdfsdf ytjyj rtyrty ddgf gsdfgsf in asdsadbfd</p> </div> 这是一个 Eslint 错误，可以通过在 Eslint 插件配置文件中添加 "extends": "eslint:recommended" 行来修复。这里是Eslint官方网页错误页面的链接。

vue.js vuejs2 vue-component vuex vuetify.js

回答 1 投票 0

Vue 插槽样式

有没有办法在 Vue 组件中设置插槽的样式？和不工作。

vue.js vuejs2 vue-component

回答 5 投票 0

vue-component 相关问题

最新问题