vue-component 相关问题

我试图制作一个基于插槽的上下文菜单组件，它应该像这样使用 ... 我试图制作一个基于插槽的上下文菜单组件，它应该像这样使用 <template> <Contextmenu> <template #contextmenu>  <template> <template #default>  <template> <Contextmenu> <template> 右键单击默认插槽时，会出现上下文菜单插槽，单击上下文菜单会发出事件。组件内部就像这样 <template> <div class="contextmenu-wrapper" v-if="showContextMenu"> <slot name="contextmenu"></slot> </div> <div class="content-wrapper" @contextmenu.prevent.stop="onRightclickContent"> <slot name="default"></slot> </div> </template> div.contextmenu-wrapper 是固定的，onRightclickContent 将设置它的 top 和 left 将其放在正确的位置。在安装的组件上，将注册一个事件侦听器，以在单击上下文菜单外部后关闭上下文菜单。一切正常，但是当我尝试这个时： <template> <div class="wrapper"> <ContextMenu> <template #contextmenu> <div class="contextmenu"></div> </template> <div class="inner"></div> <div class="inner"></div> <div class="inner inner3"></div> </ContextMenu> </div> </template> <style> .wrapper { display: flex; justify-content: space-evenly; } .inner { width: 250px; height: 100px; border: 1px solid #ccc; background-color: bisque; } .inner3 { flex-grow: 1; } .content { max-width: 100px; background-color: #3498db; } .contextmenu { width: 100px; height: 100px; background-color: azure; } </style> 问题是 div.content-wrapper 阻碍了弹性布局。但如果没有它，我如何监听内容上的右键单击事件？解决方案是这样的：用 div 包裹整个组件，这样类就会落入它，然后将其布局在父组件中： // ContextMenu.vue <template> <div class="wrapper" @contextmenu.prevent.stop="onRightclickContent"> <div class="contextmenu-wrapper" v-if="showContextMenu"> <slot name="contextmenu"></slot> </div> <slot name="default"></slot> </div> </template> // parent component <template> <div class="wrapper"> <ContextMenu v-for="i in 3" class="inner"> <template #contextmenu> <div class="contextmenu"></div> </template> <div class="content"></div> </ContextMenu> </div> </template> 但是这样就会出现三个相同的右键菜单，内容比较杂乱，给用户带来麻烦。请帮我摆脱困境。问题解决了。问题是，我不应该尝试影响父组件中的槽内容。因此，我没有在 slot#content 上绑定事件，同时保持其布局，而是让组件本身成为 Flex 容器： // ContextMenu.vue <template> <div @contextmenu.prevent.stop="onRightclickContent"> <div class="contextmenu-wrapper" v-if="showContextMenu"> <slot name="contextmenu"></slot> </div> <slot name="default"></slot> </div> </template> // parent component <template>  <ContextMenu class="wrapper"> <template #contextmenu> <div class="contextmenu"></div> </template>  <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </ContextMenu> </template> <style> .wrapper{ display: flex; } </style> class="wrapper" 将落入 ContextMenu 中的根 div，然后它成为 Flex 容器。

vue.js flexbox vue-component v-slot

回答 1 投票 0

“CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>”类型上不存在属性“XXX”

我使用 TypeScript 创建了一个 vue 组件，并且在 data() 和methods() 中收到此错误：类型“CombinedVueInstance”上不存在属性“xxx” 我使用 TypeScript 创建了一个 vue 组件，并且在 data() 和 methods() 中收到此错误： Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'. 例如： 33:18 Property 'open' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'. 31 | methods: { 32 | toggle: function () { > 33 | this.open = !this.open | ^ 34 | if (this.open) { 35 | // Add click listener to whole page to close dropdown 36 | document.addEventListener('click', this.close) 每当使用 this.close() 时也会显示此错误。这是组件： <script lang='ts'> import Vue from 'vue'; import axios from 'axios' export default Vue.extend({ data: function () { return { open: false } }, computed: { profilePath: function () { return "/user/" + this.$store.state.profile.profile.user.id } }, methods: { toggle: function () { this.open = !this.open if (this.open) { // Add click listener to whole page to close dropdown document.addEventListener('click', this.close) } }, close: function () { this.open = false; document.removeEventListener('click', this.close) } } }) </script> 什么原因导致此错误？它似乎仍然是在开发过程中出现的错误，但当我部署到生产环境时，它们会导致问题。如 Vue 文档的 Typescript 支持部分所述：由于 Vue 声明文件的循环性质，TypeScript 可能难以推断某些方法的类型。因此，您可能需要在 render 和计算等方法上注释返回类型。就您而言，您应该将 profilePath: function () { 更改为 profilePath: function (): string { 如果您有一个返回值的 render() 方法，但没有 : VNode 注释，您可能会遇到相同的错误。对我来说，解决方案是显式定义所有计算属性、方法等的返回值。所以代替： myComputedProperty() { return this.foo; }, 我必须这么做 myComputedProperty(): boolean { return this.foo; }, 即使我期望，根据类型推断，这应该是不必要的我收到以下错误： Property 'doThisInput' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'. 而且doThisClick也给出了同样的错误。解决方案：我已将 declaration 添加到组件中。 <script lang="ts"> import Vue from 'vue'; // Add below code sample to your component declare module 'vue/types/vue' { interface Vue { fields: Field[]; doThisClick: () => void; doThisInput: () => void; } } export default Vue.extend({ name: 'form-builder', data() { return { fields: [ { name: 'name', events: { click: this.doThisClick, input: this.doThisInput }, }, ], }; }, methods: { doThisClick(field: Field): void { console.log('click', field, event); }, doThisInput(field: Field): void { console.log('Input', field, event); }, }, }); </script> 这似乎是由于使用 this.$store 来计算 profilePath 的返回值，再加上其声明中未指定的返回类型而导致的。一种解决方法是将返回类型指定为 string: profilePath: function(): string { 已通过 npm run serve 和 npm run build 进行验证，在 macOS Mojave 上使用 Vue CLI 3.7.0 GitHub 演示试试这个： (this as any).open 这也适用于注入的属性： (this as any).injectedProp 和$refs： (this as any).$refs.myElement 编译器可以显示警告，但可以工作重要：这是一个临时解决方案，使用类组件更优雅 2022 年 1 月更新：将 vetur.experimental.templateInterpolationService 更改为 false。对于VSCode，您可以通过搜索图标找到它🔎：然后默认是true：然后，将其更改为false：终于解决了错误。我在使用 VS Code 编辑器时遇到此错误。我在 vs code 上安装了 Vetur 插件，Vetur 将 vue 文件处理为 typescript 文件，所以我将其修复为编辑 settings.json 文件请在 VS 编辑器中找到此文件，然后按如下所示进行更改 .vscode/settings.json "vetur.experimental.templateInterpolationService": false 在使用打字稿时，我已经看到这个问题多次出现。我不确定这是否是 vue-tsc 或其他问题，但这是解决 linter 警告/错误的解决方案。（它可能发生在 Vue 之外，但这就是我看到的地方。我确信该解决方案对于任何其他库/框架都是相同的。）通常问题看起来像这样...... TS2339: Property 'title' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'. 解决方案是定义一些类型，以便 Vue 知道组件中尝试定义什么。示例： interface IData { title: string; } interface IProps { } interface IComputed { } interface IMethods { } 定义组件 export default Vue.extend<IData, IMethods, IComputed, IProps>({ data() { title: "Some title" } }); 另请注意，传递类型参数的顺序很重要。顺序遵循 DMCP（数据、方法、计算、道具）。临时解决方案是降级到之前的版本，直到问题解决为止。将 vuter 版本降级为 0.26.0 并且可以正常工作。此处描述了相同的问题：https://github.com/vuejs/vue/issues/9873 https://www.gitmemory.com/issue/vuejs/vue/9873/485481541 由于 TS 3.4.x 存在问题，3.9.6 现在对我来说效果很好您需要以正确的方式使用function以保留此引用。 methods: { toggle() { this.open = !this.open if (this.open) { // Add click listener to whole page to close dropdown document.addEventListener('click', this.close) } }, close() { this.open = false; document.removeEventListener('click', this.close) } } 我在常规 vs 代码设置中插入了这些 vetur 设置并且它起作用了 "vetur.useWorkspaceDependencies": true, "vetur.validation.templateProps": true, "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "vetur.format.options.tabSize": 4, "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatter.ts": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-expand-multiline" }, "prettyhtml": { "printWidth": 100, "singleQuote": false, "wrapAttributes": false, "sortAttributes": false } },

javascript node.js typescript vue.js vue-component

回答 12 投票 0

如何将对象传递给生成宽度的Vue Web组件？

我的组件必须渲染一个对象来填充内容。当我在 Vue 项目中工作时，我可以毫无问题地传递这个对象我的组件必须渲染一个对象来填充内容。当我在 Vue 项目中工作时，我可以毫无问题地传递这个对象 <my-compnent :card="card"></my-component> 但是当我尝试使用构建的组件时，它不会将“MyCard”读取为对象，而是读取为字符串......请提供一些帮助我以与vue相同的方式尝试过，使用：card，但它不起作用，如果我只使用card =“card”，它可以访问组件但没有对象我的代码： <script> card = { name: 'card', graphic: 'https://static.anychart.com/images/gallery/v8/line-charts-line-chart.png', subtitle: 'about this card', info: 'this is a test content card', selector1: [ { name: 'opt 1' }, { name: 'opt 2' }, { name: 'opt 3' } ], selector2: [ { name: 'opt A' }, { name: 'opt B' }, { name: 'opt C' } ] } </script> <script src="https://unpkg.com/vue"></script> <body> <my-component card="card"></card> </body> 错误： [Vue warn]：无效的道具：道具“card”的类型检查失败。期望的对象，得到值为“card”的字符串。我也尝试过 <my-component :card="card"></card> 但这仅适用于 vue 项目，不适用于导出的 Web 组件。它给出了这个错误： [Vue warn]：渲染错误：“TypeError：无法访问属性“名称”，_vm.card 未定义” card="card" 会将字符串“card”作为值传递给 card 属性。如果你想将 JS 对象传递给 Vue 外部导出的 Web 组件，那么你必须在 JS 本身中完成。 <script> const card = { name: 'card', graphic: 'https://static.anychart.com/images/gallery/v8/line-charts-line-chart.png', subtitle: 'about this card', info: 'this is a test content card', selector1: [ { name: 'opt 1' }, { name: 'opt 2' }, { name: 'opt 3' } ], selector2: [ { name: 'opt A' }, { name: 'opt B' }, { name: 'opt C' } ] } let comp = document.querySelector('my-component') comp.card = card </script> <body> <my-component card="card"></card> </body> 仅当您在 vue 项目中工作时，才可以使用 v-bind:card 或简单地使用 ':card'，在这种情况下，您不需要使用导出的组件。但在这种情况下，对象 card 需要传递给 Vue 实例的 data 属性，否则 Vue 找不到它。这就是您收到错误的原因。 <script> const app = new Vue({ el: '#app', data: { card, }, } </script> <my-element :user.prop="{ name: 'jack' }"></my-element>  <my-element .user="{ name: 'jack' }"></my-element>

javascript vue.js vue-component web-component vue-directives

回答 2 投票 0

在 Vuetify 中使用自定义主题并将颜色变量传递给组件

在我的index.js 文件中，我已使用我公司的颜色手动覆盖 Vuetify 主题对象： Vue.use(Vuetify, { 主题： { 主要：'#377ef9'，次要：'#1b3e70'，口音：'#ff643d'...

vuejs2 vue-component vuetify.js

回答 7 投票 0

如何访问在 Vue + Buefy 中的作用域样式块中创建的 CSS 变量

通过遵循 Buefy 文档，我能够自定义我的颜色，甚至创建新的颜色，使用 as is-[colorName] 作为 HTML 元素类。 // 导入布尔玛的 </desc> <question vote="1"> <p>通过遵循 <a href="https://buefy.org/documentation/customization/" rel="nofollow noreferrer">Buefy 文档</a>，我能够自定义我的颜色，甚至创建新的颜色，使用 <pre><code>is-[colorName]</code></pre> 作为 HTML 元素类。</p> <pre><code><style lang="scss"> // Import Bulma's core @import "~bulma/sass/utilities/_all"; //Create your own colors. $download: #253091; $download-inverted: findColorInvert($download); // Setup $colors to use as bulma classes (e.g. 'is-twitter') $colors: ( "white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert), "download": ($download, $download-inverted), ); // Import Bulma and Buefy styles @import "~bulma"; @import "~buefy/src/scss/buefy"; //Custom global styles. #app { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </code></pre> <p>现在，在页面中，我需要访问颜色变量，例如 $download 来创建简单的渐变。</p> <pre><code><style lang="scss" scoped> @import "~bulma/sass/utilities/_all"; .gradient { background-image: linear-gradient($download, #info); } </style> </code></pre> <p>如何访问另一个 Vue 组件/页面中的变量？</p> <p>我认为由于 App.vue 样式块没有作用域，我可以从任何地方访问新创建的变量，但显然我不能。</p> </question> <answer tick="false" vote="0"> <p>您的 CSS 变量已附加到 #app 容器：</p> <pre><code>#app { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </code></pre> <p><strong>选项 1：</strong> 一些 Buefy 元素是在应用程序容器外部启动的。例如，Buefy Snackbar。您可以通过将“#app”传递到容器周边来将其附加到此容器，然后将您的 CSS 变量置于其范围内：</p> <pre><code> this.$buefy.snackbar.open({ message: '...', container: '#app', }) </code></pre> <p><strong>选项 2：</strong> 如果您的 Buefy 元素可以接收自定义类，您可能需要使用覆盖定义一个全局类，并将该类作为参数传递给您的元素。</p> </answer> </body></html>

css vue.js vuejs2 vue-component buefy

回答 0 投票 0

反应变量在注入时值为未定义

我正在使用 vuejs3 和 options api 如下面的代码所示，在提供程序组件中，我提供了对象 isToggleBtnLabelDigitizePolygon 的反应版本。最初，

vue.js vuejs2 vuejs3 vue-component

回答 1 投票 0

需要vuejs设计组件标签的官方文档

由于我是vuejs新手，我想知道哪个网站包含所有设计组件标签的组合？换句话说，当我想添加一个复选框时，例如我会访问这个网站...

vue.js vuejs2 vuejs3 vue-component

回答 1 投票 0

应用于 v-model 的更改不会触发可写的计算方法

我正在使用 vuejs3 和 options api 如下面发布的代码所示，vue 组件 RadioBtnTimeSeriesAgo 有一个单选按钮作为输入。 RadioBtnTimeSeriesAgo 是一个子组件。我做...

vue.js vuejs2 vuejs3 vue-component

回答 1 投票 0

如何渲染一个组件的内容，该组件通过槽渲染另一个组件

如下面发布的代码所示，组件 ButtonDigitizePolygon.vue 包含一个带有命名槽的按钮。组件 NDVIComparisonGui.vue 呈现 ButtonDigitizePolygon.vue。我想要这个应用程序...

vue.js vuejs3 vue-component

回答 1 投票 0

如何初始化单选按钮的可写计算属性

我正在使用 vuejs3 和 options api 如下面发布的代码所示，我有两个并且我通过 v-model 进行绑定。当我运行应用程序时，计算的 get() 的日志语句

vue.js vuejs3 vue-component

回答 1 投票 0

Vue.js：如果值为空，则不渲染属性（例如：to="" 或 type=""）

我有 Button 组件，它会呈现 nuxt-link 或按钮，具体取决于您是否提供某些属性（例如 to 或 type）。我有一个 Button 组件，它会渲染一个 nuxt-link 或一个按钮，具体取决于您是否提供一些属性，如 to 或 type。 <div class="Btn"> <component :class="['Btn__button', createAppearanceClasses]" v-on:click="click" :disabled="disabled" :is="type" :to="to" :href="external ? to : false" :target="target" :type="buttonType" > <slot /> </component> </div> （而 type 是一个计算属性，用于为内部链接返回 nuxt-link，如果是外部链接则返回 a 标记，如果未定义这些属性则返回 button）现在我们有时会渲染一些打开模态框或提交的按钮。在那里我们不传递任何类型或属性： <Btn :class="'FlexContent__button'" :appearance="['rounded-corners']" v-on:click.native="openOverlay" > {{ component.text }} </Btn> 在渲染的 HTML 中我得到： <button disabled to="" target="" type="" class="Btn__button Btn__button--rounded-corners"> 如果我验证这一点，我会收到有关这些空属性的错误： Attribute to not allowed on element button at this point. 仅当我将实际值传递给 Btn 组件时，如何才能渲染属性 to=""？我正在考虑这样的事情，但这不起作用： (to ? ':to="to"' : '') 所以我需要一些其他解决方案。提前感谢您的提示。干杯使用 v-bind 绑定到 null、undefined 或 false 值的任何属性都不会在元素中渲染。属性和 v-bind

javascript vue.js properties vue-component

回答 1 投票 0

使用 Vue.js 引用外部 JavaScript 文件

我正在使用 Vue.js 2.0，我需要引用外部 JavaScript 文件，我的 index.html 文件中有这个文件

javascript vue.js vue-component

回答 0 投票 0

如何将 Typescript Vue 项目导入 Javascript Vue

我想在我的 Javascript Vue 3 项目中使用这个日历组件。为此，我在项目中创建了一个名为 ProCalendar.vue 的组件，并复制粘贴示例中显示的 App.vue 代码...

javascript typescript vue.js npm vue-component

回答 1 投票 0

vue-component 相关问题

最新问题