组件及组件间传值
全局组件
- Vue.component(“组建名字”，{组件配置项})
- 定义全局组件,只要在vue的作用范围内就可以使用该组件
- 组件名字不能使用html标签
- 标签名字为驼峰式写法（headerCom），调用时可以使用 header-com
- 组件中可以使用vue实例中除el的所用属性（配置项）
- 组件可以复用，如果data为一个对象，那么所有的组件实例的data都指向同一个data对象，所以在data设置时，组件data设计为一个函数，通过函数的调用获得data对象
局部组件
- 通过components定义在vue实例内
组件间通信
父子通信
- props: [‘title’,’data’]
- 组件属性：外部属性 内部属性 计算属性
- 外部属性：组件内部只能使用不能修改
- 单向数据流：数据自顶向下的
- 子组件不能修改父组件的数据
- 父组件内 :title=”handleClick”,子组件内props：[‘title’]接收使用this.title(参数)调用 父组件内的handleClick（）就能接收到该参数，从而实现子传父
vue中发布订阅模式的实现
- 自定义事件监听
- vm.$on(“事件名字”,callback) vm.$once() 只监听一次
- 触发自定义事件
- vm.$emit(“事件名字”) vm.$emit(“事件名字”，传参) 可以闯入参数 $on的回调可以接收该参数
- 移除事件监听
- vm.$off() 移除所有事件监听
- vm.$off(“事件名字”) 移除指定事件监听
- vm.$off(“事件名字”，callback) 移除指定事件指定的回调函数监听
- 事件总线 bus（new一个Vue实例将，将事件挂载到该实例上从而实现兄弟组件间的通信） 实现兄弟组件间的通信 通过订阅发布模式
项目生成
vue init webpack-simple my-app
cd my-app
npm i