vue 组件

认识组件

组件是vue强大的功能之一
vue的组件具有封装可复用的特点 能够让你在杂乱的应用中拆分为独立模块来使用
但是需要注意的是 所有vue组件同时也是vue的实例 可接受相同的选项对象
每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

注册组件

注册组件可以分为全局注册和局部注册
全局组成的组件可以任何地方使用 一般情况下使用比较少
而局部组件只是注册在某一个 Vue 实例化对象上

全局组件

基本语法如下
import Vue from ‘vue’
import 组件对象 from ‘vue文件路径’

Vue.component(“组件名”, 组件对象)

首先我们先创建一个vue文件作为组件来使用

接着引入组件

然后我们在APP.vue引入 并打开

这样 MyCs就是一个全局组件了

局部组件

基本语法如下
import 组件对象 from ‘vue文件路径’

export default {
components: {
“组件名”: 组件对象
}
}

组件基本使用总结

1 创建一个独立的vue文件作为组件
2 引入注册的 文件 得到组件配置对象
3 在当前页面以标签的形式使用

vue组件通信

我们知道 每一个vue文件的数据的，变量 ，值 都是独立的
在我们实际开发中 许多功能都是以组件的形式来写的
但是这样数据就不能互通 所以我们要学会组件通信
简单的说 组件通信就是组件之间传递数据的媒介

父向子组件通信

props

父组件向子组件传递数据，是通过props进行传递
简单的说 父亲组件通过引入子组件 并使用子组件的时候 把数据以属性的方式添加


这样 就完成了简单的父子组件通信

循环

我们加入一个数组类型的数据在父组件中

list: [
    { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
    { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
    { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
],

然后我们开始操作

然后在子组件引入即可

效果如下
没写样式有点丑

Prop 类型

到这里 我们只看见了以字符串数组形式列出的 prop，
但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型
如下

子向父组件组件传值

我们实际开发中 我们是用自定义事件来子组件的值传给父组件

Vue 实例实现了一个自定义事件接口，用于在组件树中通信。这个事件系统独立于原生 DOM 事件，用法也不同。

每个 Vue 实例都是一个事件触发器：

使用 $on() 监听事件；

使用 $emit() 在它上面触发事件；

使用 $dispatch() 派发事件，事件沿着父链冒泡；

使用 $broadcast() 广播事件，事件向下传导给所有的后代。

eventbus

EventBus 又称为事件总线。
在vue文件中 每个文件的数据 方法都是独立的
我们在父子组件的时候可以用props
但是兄弟组之类没有关系的组件 就不可以用props
这时候我们就把需要相互传递的组件 在Eventbus中封装
下面我们一步一步来学习eventbus

初始化

首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。

发送事件和接收

我们新建两个组件

然后用app引入这两个组件

即可达到我们想要的效果