模板内容未插入到插槽中
我尝试使用插槽将父组件中的内容注入其子组件，但Vue一直呈现默认内容，而不是解析从其父组件发送来的内容。
这是父组件的代码，而父组件又是全局组件的子组件：
let parentComponent = {
template: `
<div>
<child-component>
<template v-slot:action>Close</template>
<template v-slot:element>Modal</template>
</child-component>
</div>
`,
components: {
'child-component': childComponent
}
};下面是它的子组件，我想在其中传递内容：
let childComponent = {
template: `
<button>
<slot name="action">Open</slot>
<slot name="element">Window</slot>
</button>
`,
};该按钮仍然显示默认内容：“打开窗口”。
我做错了什么？
编辑：
这是其余的内容，以防万一：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueJS</title>
</head>
<body>
<div id="app">
<vue-directives></vue-directives>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="components/slotDirective/slotDirectiveSubcomponent.js"></script>
<script src="components/slotDirective/slotDirective.js"></script>
<script src="components/VueDirectives.js"></script>
<script>
let vue = new Vue({
el: '#app'
});
</script>
</body>
</html>和VueDirectives.js：
Vue.component('vue-directives', {
template: `
<div>
<h3>{{ title }}</h3>
<parentComponent/>
</div>
`,
data() {
return {
title: "VueJS directives",
}
},
components: {
parentComponent
}
});回答 2
Stack Overflow用户
发布于 2020-04-12 22:45:56
我不确定插槽是为此而设计的。如果你只是改变一个按钮的文本，将道具传递到parentComponent中，这是我应该做的。例如。
<parentComponent buttonText="some text or bind with a data value or computed prop"/>请参阅：https://vuejs.org/v2/guide/components-props.html
使用老虎机...如果你正在进行实验，试试这个，一个可重复使用的对话框，你可以在任何地方弹出并控制内容。例如。
// myDialog
<v-dialog>
<slot>Here you can put what you want</slot>
</v-dialog>并使用：
<myDialog>
<template>
<myContent /> Or just put content here without another component
</template>
</myDialog>Stack Overflow用户
发布于 2020-04-13 16:40:12
我修复了这个错误。我不知道原因，但如果我从CDN加载Vue.js，或者如果我手动将其作为单个文件下载到本地，它也无法工作。
然后，我最终尝试从npm安装它，并在node_modules/vue/dist/vue.js中加载Vue.js，这样它就可以工作了。我假设在其他情况下，Vue.js并不符合它的所有功能。
https://stackoverflow.com/questions/61172446
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号