vue-组件通信

组件是一个可复用的 Vue 实例, 封装了 HTML / CSS / JS

好处：相互独立 复用性高 扩展性高 可维护性高

组件使用

1、封装组件

一个vue文件就是一个组件

2、引入组件

3、注册组件

        全局注册：

        在main.js中注册 注册后所有地方都可以使用

// 1. 引入组件对象
import 自定义 from './components/文件名.vue'
// 2. 全局注册组件
// 一次只能注册一个, 所以是 component 没有 s
// 注册组件的方法, 有两个参数
// 参数1: 组件名
// 参数2: 组件对象
 Vue.component('Panel', Panel)

        局部注册：

        在要使用的组件中注册, 只能在当前组件中使用 在当前文件内引入

// 局部注册:
// 1. 引入组件
import Panel from './components/Panel.vue'

// 2. 注册组件
// 3. 使用组件
export default {
  // 在 components 节点下注册
  components: {
    // 属性名就是注册的组件名
    // 属性值就是组件对象
    Panel
  }
}

4、使用组件

组件名作为标签名使用即可

组件通信

父传子：

        1. 在子组件中使用 props 定义变量准备接受

        2. 在父组件中使用属性传递数据

 

注意事项：单向数据流

Vue 为了让我们数据流向更清晰, 不允许在子组件中修改父组件传递的数据, 如果不小心修改了, 父组件不会收到更新, 同时还会报错

父组件传递给子组件的数据, 只能由父组件修改, props 的数据都是只读的

子传父：

1. 在父组件中给子组件绑定自定义事件

2. 在子组件中恰当的时机触发事件, 并携带数据

3. 父组件的事件处理函数执行, 处理对应的业务