将 vue 组件传递给子组件 [英] Pass a vue component to a child component
问题描述
我正在尝试创建一个 Vue 组件，该组件将接受一个组件作为参数来显示数据，但我无法弄清楚如何使其工作.如果我全局注册显示组件(使用 Vue.component())，它可以工作，但是如果我在本地注册它，我会收到以下错误:
[Vue warn]:未知的自定义元素:<my-link>- 您是否正确注册了组件?对于递归组件，请确保提供名称"选项.谁能告诉我如何通过本地注册使这个工作?
主要组件:
<div><my-list :items="items" :renderer="renderer"></my-list></模板><脚本>从 './my-list' 导入 MyList导出默认{成分: {'我的列表':我的列表，我的链接":{道具:{数据:对象}，模板:'<span>{{ data.Name }}</span>'}},数据() {返回 {项目: [{ id: 1, Name: 'One' },{ id: 2, 名称: '二' }],渲染器:'我的链接'}}}
MyList 组件:
<div><div v-for="item in items" :key="item.id"><div :is="renderer" :data="item"></div></模板><脚本>导出默认{道具: {项目:数组，渲染器:字符串}}
您看到此警告是因为您尚未在您尝试使用的组件范围内注册 my-linkin.您在 Main 组件中注册了 my-link，但 MyList 组件无权访问该范围.
将 my-link 的组件定义移动到 MyList 组件的 components 属性将解决此问题.
或者，您可以为 my-link 组件创建一个新的单文件组件，然后将其导入到您想要使用的任何位置.就像您对 my-list 组件所做的一样.
如果您希望 my-link 组件可全局访问，则需要在实例化根 Vue 实例的任何位置通过 Vue.component 注册它(可能在 src/main.js 中，如果你使用 vue-cli 来设置你的项目):
Vue.component('my-link', {道具:{数据:对象}，模板:'<span>{{ data.Name }}</span>'});新的 Vue({el: '#app',...});<小时>
如果您真的想将一个组件传递给一个子组件，而无需注册到该子组件，您可以将组件定义作为属性传递，正如@BertEvans 所建议的那样.
I'm trying to create a Vue component that will accept a component as parameter to display data, but I have trouble figuring out how to make it work. If I register the display component globally (using Vue.component()), it works, but if I register it locally, I get the following error:
[Vue warn]: Unknown custom element: <my-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Can anybody tell me how to make this work with local registration?
Main Component:
<template>
<div>
<my-list :items="items" :renderer="renderer"></my-list>
</div>
</template>
<script>
import MyList from './my-list'
export default {
components: {
'my-list': MyList,
'my-link': {
props: { data: Object },
template: '<span>{{ data.Name }}</span>'
}
},
data() {
return {
items: [
{ id: 1, Name: 'One' },
{ id: 2, Name: 'Two' }
],
renderer: 'my-link'
}
}
}
</script>
MyList Component:
<template>
<div>
<div v-for="item in items" :key="item.id">
<div :is="renderer" :data="item"></div>
</div>
</div>
</template>
<script>
export default {
props: {
items: Array,
renderer: String
}
}
</script>
You're seeing this warning because you have not registered my-link in the scope of the component you are trying to use it in. You registered my-link in the Main component, but the MyList component doesn't have access to that scope.
Moving the component definition of my-link to the components property of the MyList component will fix the issue.
Alternatively, you could create a new single-file component for the my-link component, and import it wherever you want to use it. Just like you do for the my-list component.
If you want the my-link component to be globally accessible, you'll need to register it via Vue.component wherever you are instantiating the root Vue instance (probably in src/main.js if you used vue-cli to set up your project):
Vue.component('my-link', {
props: { data: Object },
template: '<span>{{ data.Name }}</span>'
});
new Vue({
el: '#app',
...
});
If you really want to pass a component in to a child component, without registering to that child component, you can pass the component definition as a property, as suggested by @BertEvans.
这篇关于将 vue 组件传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
