15.使用组件

目录

1  独立组件

2  私有子组件

3  全局组件

---

1  独立组件

我当前App.vue的内容是这样的

LEFT.vue的内容是这样的

RIGHT.vue的内容是这样的

那么这个时候我们认为 left.vue，right.vue与App.vue 是彼此独立的三个组件

2  私有子组件

我现在想把LEFT.vue与RIGHT.vue放入App.vue中，我们需要使用import导入，然后使用 export default 注册，最后在template中使用

• 我这里使用默认的vue3创建项目，然后使用了 Vue Language Features(Volar) 插件， @ 会自动定位为项目中的src
• 在components中直接写组件的名称是简化的写法，也可以这样写，'LEFT':LEFT，这样我们就可以重命名组件，在template中用的时候要用新的名字

此时LEFT组件与RIGHT组件同属App组件的私有子组件

LEFT组件与RIGHT组件虽然已经被App组件注册了，但在别的组件中也可以注册LEFT组件与RIGHT组件。

3  全局组件

我们如果有某一个组件用的比较频繁的话，每次使用时都导入注册会很麻烦，我们可以在全局中注册组件

我们现在 在 components 中搞一个TEXT.vue，内容如下

然后在 main.js 中导入注册

• 字符串形式的是你用时候的名字

之后你就可以随便用了，比如现在我们要在 LEFT.vue 上使用TEXT

默认情况下，组件的数据是不共用的，比如我现在将TEXT组件 搞成 一个按钮点一下就+1

然后再LEFT与RIGHT中都使用TEXT

点击上面的不会影响下面的