本节中全局组件和局部组件是不是没法一起用啊
来源:1-2 组件的定义及复用性,局部组件和全局组件(2)
昏睡红茶厘米
2021-02-25 23:01:30
代码如下,没注释掉全局组件前局部组件是显示不出来的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>组件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<div>
<!-- <public-component /> -->
<provid-component />
</div>
</div>
<script>
const ProvidComponent = {
data() {
return {
text: "我是局部组件",
}
},
template: `<div>{{text}}</div>`,
}
const app = Vue.createApp({
components: { ProvidComponent },
data() {
return {
text: "bala",
}
},
})
/* app.component("PublicComponent", {
data() {
return {
text: "我是全局组件",
}
},
template: `<div>{{text}}</div>`,
})
*/
const vm = app.mount("#root")
</script>
</body>
</html>
1回答
同学你好,可以一起使用,但是同时在html中调用它们是不行的,这个是vue内部的机制问题。需要写在跟组件的模板中,建议参考视频中的语法,如下图所示:
代码参考如下修改:
效果如下:
祝学习愉快~
相似问题