我正在学习 Vue 并尝试使用他们指南中的示例。我正在尝试在根 vue 组件内部本地注册一个子组件，如此处所述。但它没有出现在我的页面上。我缺少什么？app.components 也返回未定义。console.log('Loading my script');var componentX = { template: `<h3>Hello</h3>`}var app = new Vue({ el: '#vue-div', template: `<div>Vue is working</div>`, components: { 'component-x': componentX }})console.log(app.components);<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /></head><body> <div id="vue-div"> <component-x></component-x> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="./js/test.js"></script></body></html>
1 回答
翻阅古今
TA贡献1780条经验 获得超5个赞
问题是，你的主 Vue 有一个模板 - 这会替换目标元素内的任何 HTML
因此，您可以component-x在新的 Vue 构造函数模板中添加：
console.log('Loading my script');
var componentX = {
template: `<h3>Hello</h3>`
}
var app = new Vue({
el: '#vue-div',
template: `<div>Vue is working<component-x></component-x></div>`,
components: {
'component-x': componentX
}
})
console.log(app.$options.components);
<div id="vue-div"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="./js/test.js"></script>
或者您可以从新的 Vie 构造函数中删除 template: ，并且将使用目标元素的现有内容
console.log('Loading my script');
var componentX = {
template: `<h3>Hello</h3>`
}
var app = new Vue({
el: '#vue-div',
components: {
'component-x': componentX
}
})
console.log(app.$options.components);
<div id="vue-div">
Vue is working
<component-x></component-x>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
添加回答
举报
0/150
提交
取消