本节中全局组件和局部组件是不是没法一起用啊

来源: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回答

好帮手慕夭夭

2021-02-26

同学你好,可以一起使用,但是同时在html中调用它们是不行的,这个是vue内部的机制问题。需要写在跟组件的模板中,建议参考视频中的语法,如下图所示:

http://img.mukewang.com/climg/60386a270988f1ff06790415.jpg

代码参考如下修改:

http://img.mukewang.com/climg/60386a7e0902960e05990562.jpg

​效果如下:

http://img.mukewang.com/climg/60386a8509ca007901370080.jpg

祝学习愉快~

1

0 学习 · 15276 问题

查看课程