个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我是 Vue 新手，不知道如何在另一个组件的模板中使用一个组件。或者在其他情况下如何组合 html 中的组件，使它们嵌套或其他什么。无法从文档和SO中弄清楚。
我正在通过 cdnjs 使用 vue。
例如:
我有一个根 vue 实例#app。在其中我注册了两个数据数组:一个用于容器，另一个用于其中的表。
现在在 html 中我有一个容器，即在其中我想要一个位于“<'container'>”特定位置的表格，我该如何实现它？如果我将其直接放在“<'container'>”组件表中，Vue 不会将其识别为有效并显示错误。
到目前为止我在这里:
var app = new Vue({
el: '#app',
data: {
containersList: [{container-object}],
tablesList: [],
methods(){}
},
let container = Vue.component('container',{
props: ['item'],
template: '<div class="container">{{ item.data }}</container></div>
<container v-for="item in containerList> </container>
到目前为止，我成功地渲染了组件，用数据填充它们并使所有组件具有反应性。
我需要用表填充容器。然后也许用表格选项卡或其他内容填充表格，我该怎么做？
我的逻辑在这里失败了。
let tableComponent = Vue.component('table-component', {
props: ['item'],
template: '<div class="table"></div>'
}
let container = Vue.component('container',{
props: ['item'],
template: '<div class="container"><table-component></table-component></div>
UPD:所以看起来它的渲染方式与此处提供的类似，但显示引用数据中“tablesList”数组的错误。由于某种原因，它无法访问它并显示“属性或方法“tablesList”未在实例上定义，但在渲染期间引用”。
因此父容器组件可以访问它，而子组件则不能访问它并抛出错误。
最佳答案
我修复了您的代码中的某些内容，并构建了一个最小的示例。
请参阅下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<container></container>
</div>
<script>
let tableComponent = Vue.component("table-component", {
props: ["item"],
template: '<div class="table">table-component</div>'
});
let container = Vue.component("container", {
props: ["item"],
template: `<div class="container">
<div>container</div>
<table-component></table-component>
</div>`
});
let app = new Vue({
el: "#app",
data() {
return {
containersList: [],
tablesList: []
};
},
methods: {
anyMethod() {
console.log("teste");
}
}
});
</script>
</body>
</html>
关于javascript - Vuejs : how to use component 2 in template of component 1，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60932608/
26
4
0
我有以下代码。我无法理解应如何实现 ProjectCardDescription 组件，以便能够在 ProjectCard 组件中传递其描述 我尝试过这个，但得到一个空组件: import React
我们正试图从 styled-components 项目中找出以下问题的原因:https://github.com/styled-components/styled-components/issues/
将所有文件从 jsx 更改为 tsx 后，出现此错误: ./src/components/index.js Module not found: Can't resolve './Header' in
我正在努力遵循以下 vuejs 应用场景动态组件 + 异步组件模式。一切正常，但仍然只有一个问题:我怎样才能访问通过传入的 Prop 数据 请看现场 fiddle : https://jsfiddl
我已经明白了Difference between React Component and React Element , 使用 JSX 基本上调用 React.createElement它返回一个元素
我最近开始使用 JSX 元素语法而不是调用函数，因为它使代码更漂亮。但看起来又不太一样。令人惊讶的是，因为在 App.js 中，函数调用会导致无限循环(并引发错误)，但 JSX 元素可以工作。在 Da
通过少量渲染来构建嵌套组件系统的好方法是什么？请参阅下面带有主要问题(“如何...”)的所需代码: tab.vue(子组件) export default {
我正在编写一个轻量级游戏引擎，并且在为它做一些研究的同时，我遇到了许多令人信服的文章，它们提倡通过“组件集合”模型而不是“从具体类继承”模型来实现游戏对象。有很多优点: 可以使用数据组合对象 驱动设计
类型‘AbstractControl’上不存在属性‘Controls’。
考虑以下示例: function Travel(props) { return ( ) } function Welcom
我刚刚加入了一个 React Native 项目，在那里我经常看到扩展 React.Component 和 Component 本身的类。 示例: 类 SomeView 扩展了 React.Compo
我见过两种访问 Component 的方法: import React from 'react'; class Foo extends React.Component { ... } 和 im
我有一个库 jar，我想将其提供给许多应用程序。我想要的行为是在库中创建一个通用的 spring 组件类。如果在应用程序中，没有扩展相同的组件，则使用公共(public)组件；如果它在应用程序中扩展，
所以我正在制作一个游戏，我有 EnemyAI 以及 player，它们都扩展了 JPanel。世界有一个 null 布局，所以我正在使用 setBounds(); 来“移动”(我实际上只是移动世界图像
在 styled-component 中，您如何决定是应该使用插值函数来修改组件(通过传递 props )还是扩展现有组件。例如: const Button = styled.button`
我搜索并获取了以下信息。 请添加您的信息 h:commandbutton 与 a4j:commandButton 相同，唯一的区别是 a4j:commandButton 有额外的 ajax 请求。 a
我目前在一个项目中，我们有一个动态“表单”/内容模型，其中我们有一个包含字段和占位符的模块，占位符可以包含更多模块，为我们提供递归/灵活的数据模型. 现在为了渲染这个，我们创建了一个组件来渲染模块，动
我是 React 的新手，正在尝试设置一个 Bootstrap 模式来显示警报消息。 在我的父 App.js 文件中，我有一个错误处理程序，它向 Modal.js 组件发送一个触发模态显示的 Prop
通过 background-color:red 获得主页组件写入其 scss，然后使用 background-color:green 获取用户组件写入它的 scss。我启动我的应用程序，我在家，背景是
我有这个基本的应用程序，其中一些组件具有公共(public) load 方法。对于某些操作，我想在当前 svelte:component 上调用该方法，但我不知道如何获取对组件实例的引用。如何做到这一
我是一名优秀的程序员,十分优秀！