为什么我的 Vue 本地组件没有出现在页面中？
我正在学习 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>
红颜莎娜浏览 109回答 1
1回答
-
翻阅古今
问题是，你的主 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>
随时随地看视频慕课网APP
相关分类
JavaScript