Vue组件通信--> 在了解父子组件通信是什么之前 首先 先了解什么是组件化开发?

一.在了解父子组件通信是什么之前首先先了解什么是组件化开发?

组件化开发:一个页面(xxx.vue)可能有或多个组件(xxx.vue)组成完整的页面功能

• 封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护

一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构（template） 样式(style) 和 行为(script) (html, css和js)

注:他们都有一个共同的父组件,组件是可复用的 Vue 实例, 封装标签, 样式和JS代码

1.为什么用组件化开发?

原因:

• (1):现代前端开发均会使用组件化的开发思路
• (2):组件化开发有利于解决代码重复、冗余等问题

2. vue组件-封装使用

好处:

(1): 复用。一次封装，多次使用

(2): 代码整理，方便维护。

3.步骤

1.定义/引入->2.注册->3.使用

1. 定义组件 : import MyPine from "./MyPine"

2. 注册组件: components: { xxx.vue/xxx },

3. 使用组件 : <MyPine />或 <MyPine></MyPine> 参考图:

详细具体操作流程: 定义一个名为MyCom的组件，并在App.vue中使用它

--使用组件。在当前页面中，当做标签来使用。

注意：组件名不能与现有的html标签名一致。

总结

• 每一个组件都是封闭的。它有自己的template, script，style
• 组件之间可以相互引用使用。