VUE.js组件通信精髓归纳（基础篇）

前言
文章涉及的内容可能不全面，但量很多，需要慢慢看。我花了很长的时间整理，用心分享心得，希望对大家有所帮助。但是难免会有打字的错误或理解的错误点，希望发现的可以邮箱告诉我1163675970@qq.com，我会及时的进行修改，只希望对你有所帮助，谢谢。

vue 何为组件化？
我们可以很直观的将一个复杂的页面分割成若干个独立组件

每个组件包含自己的逻辑和样式再将这些独立组件组合完成一个复杂的页面。

将页面中重复的的功能抽离出来封装成一个单独的组件，在任何需要的地方使用该组件即可；

这样既减少了逻辑复杂度 , 提高代码的可复用程度和可维护性；

页面是组件的容器,组件自由组合形成完整的界面,当不需要某个组件时,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

每个组件都是一个 Vue 的实例，那么这个组件也有自己的生命周期，并且也有 data、computed、methods、watch这些属性，每个组件都有自己私有的数据；还可以接受来自上层组件传入的数据；

组件化开发的好处
提高开发效率
方便可复用性
便于协同开发
更容易被管理和维护
每一个VUE组件都是一个独立的个体（独立的VM实例）：DATA是独立的（不同组件的DATA应该互不干扰）、有完整的生命周期、方法等也是独立的
能够实现组件的嵌套：需要掌握组件之间的信息通信
…
VUE中的组件
vue中的组件是自定义的标签,可以扩展原生的html元素,封装可重用的代码
一个自定义标签 vue 就会把他看成一个组件（除w3c规定以外的标签），自定义标签原本没有实际意义，但是vue会给这些标签赋予一定的意义
全局组件 & 局部组件
全局组件：无需单独引用或者配置，直接在大组件中调取全局组件即可

可以声明一次在任何地方使用

一般在写插件时全局组件使用的多一些

vue.filters 它也是放到全局中，不用声明直接用

全局组件是声明在 vue类上的

复制代码局部组件：1- 创建 2- 注册 3- 引用

必须告诉这个组建属于谁

局部组件是声明在实例 vm 上的

组件是相互独立的不能直接跨作用域实例(vm)也是一个组件，组件中拥有生命周期函数

</div>
<!-- IMPORT JS-->
<script src="./20191007/node_modules/vue/dist/vue.js"></script>
<script>/**  局部组件-使用三部曲:*     1. 创建*     2. 注册*     3. 引用*  组件是相互独立的  不能直接跨作用域 实例(vm)也是一个组件， 组件中拥有生命周期函数** */let obj ={ face:'丑到爆' }; //=> 如果组件共用了数据，会导致数据同时更新 （=错误写法=） （但是组件 特点 独立性）/*子组件不能直接使用父组件的数据 （组件之间的数据交互）组件理论上可以无限嵌套*///=> 1. 创建这个组件let handelesome1 ={template:`<div @click="fn">1.帅气 {{face}} {{a}}</div>`,/* face='颜值爆表' === @click="fn"*/data(){ //=> 这里的data 必须是一个函数return obj},methods:{fn(){//=> this 为当前的组件this.face = '颜值爆表'}}} ;let handelesome2 ={template:'<div>2.霸气 {{face}}{{a}}</div>',data(){return obj}} ;let vm = new Vue({el:'#app',data:{ //=> 只有这里的data是 对象title:"你自认为自己??？",//=> 这里的a 属性 在 局部组件中调用引发报错//=>a:1},components:{//=> 2. 注册这个组件  ES6名字一样写一个handelesome1,handelesome2}});
</script>

复制代码嵌套组件 1- 创建 2- 注册 3- 引用如果要在一个组件使用另一个组件， 1.先保证使用的组件得是真实存在， 2.在需要引用这个组件的实例上通过components注册这个组件， 3.组件需要在父级的模板中通过标签的形式引入复制代码父传子-props--属性传递 props:[]方式传递属性以及对象的方式传递属性对象属性传递的参数校验 type：[] 校验类型 default:0, 设置默认值 required: true, 设置是必须传递属性，但是不能和default同时使用 validator(val){ } 自定义校验器

父亲:{{money}}

复制代码基于ref实现父子组件信息通信 ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，基于此可以快速获取和操作子组件中的数据 parent和children是获取组件和子组件的实例，只不过$children是一个数组集合，需要我们记住组件顺序才可以 VUE--发布emit 订阅on 订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象

创建一个实例，相当于传建一个任务队列
vm. o n ( 自定义事件 , 要执行的方法 ) 把自定义事件和方法订阅到任务队列中 ; 值得注意的是 : 我们调取子组件的时候 , 基于 @ x x x = ′ f u n c 也相当于给子组件所在实例的任务队列订阅一个方法 v m . on(自定义事件,要执行的方法) 把自定义事件和方法订阅到任务队列中;值得注意的是:我们调取子组件的时候,基于 @xxx='func也相当于给子组件所在实例的任务队列订阅一个方法 vm. on(自定义事件,要执行的方法)把自定义事件和方法订阅到任务队列中;值得注意的是:我们调取子组件的时候,基于@xxx=′func也相当于给子组件所在实例的任务队列订阅一个方法vm.emit(自定义事件，需要传参的信息)把指定自定义事件中的方法触发执行,可以给方法传递对应的信息
vue的单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：
加载渲染过程：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程：父 beforeUpdate -> 父 updated

销毁过程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

有两种常见的试图改变一个 prop 的情形 :
这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值
这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性

Title 复制代码子传父--发布$emit 通知基于发布订阅模式 on 及emit 单向数据流来实现子通知父

父亲:{{money}}

<child :m="money" @child-msg="things"></child>

复制代码事件总线 -- EventBus 什么是事件总线？每个组件都是一个 Vue 的实例，相互之间不能互通数据；

要修改数据一定要通知，所以找一个第三方，让第三方监听事件，在事件触发时执行对应的修改数据的操作，这个第三方就是事件总线；

事件总线的用法
创建一个空的 Vue 实例；let eventBus = new Vue();

eventBus.$on(自定义事件名, 事件函数) 监听事件

eventBus.$emit(事件名) 触发事件

Title 复制代码插槽 slot 插槽是什么？当引用组件时，我们可以向组件的标签中嵌入内容。这些内容可以嵌入到子组件中，但是需要使用插槽机制即，slot；

如何使用插槽
首先在创建子组件时需要声明一个 slot 标签占位；

在组件标签中嵌入内容

具名slot和匿名slot
匿名 slot，在声明 slot 时不写 name 属性，嵌入在组件标签中没有写 slot 属性的标签都会放在匿名 slot 中

具名 slot，在声明 slot 时要写上 name 属性；嵌入在组件标签中的内容需要指定 slot=“slot的名字”

Title

这是默认的内容

hahahah

这是个头

主体

尾部

复制代码基于 provide 和 inject 实现祖先与后代的通信祖先组件基于provide注册需要供后代组件使用的数据 { provide:{ //=>对象或者返回对象的函数都可以（属性值如果是data中的数据，则必须使用函数的方法进行处理） name:'zhufeng', year:10 }, ... } 复制代码后代组件基于inject声明需要使用的数据并调取使用 { inject:['name'], methods:{ func(){ let name=this.name; } } }

VUE.js组件通信精髓归纳（基础篇）相关推荐

（25）Vue.js组件通信—父组件向子组件传值
一.Vue.js组件通信介绍子组件如何获取父组件中的数据?父组件如何得知子组件的数据变更?如果是更加复杂的组件关系呢?在组件间传递数据的操作,称为组件通信. 二.Vue.js组件通信内容 • 父组件 ...
Vue.js 源码分析(九) 基础篇生命周期详解
先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDes ...
Vue.js 源码分析(五) 基础篇方法 methods属性详解
methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...
（26）Vue.js组件通信—props 命名规则
建议 prop 命名使用 camelCase(驼峰命名法),父组件绑定时使用 kebab-case(多个单词使用连字符连接书写).
vue.js路由配置vue-router的基础学习 - 概念篇
文章目录引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由引言 · ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
vue.js 组件之间传递数据 1
vue.js 组件之间传递数据框架浏览数:437 2017-8-21 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据 ...
手摸手，带你用vue撸后台系列一（基础篇） - 掘金
完整项目地址:vue-element-admin 系列文章: 手摸手,带你用 vue 撸后台系列一(基础篇) 手摸手,带你用 vue 撸后台系列二(登录权限篇) 手摸手,带你用 vue 撸后台系 ...

VUE.js组件通信精髓归纳（基础篇）

VUE.js组件通信精髓归纳（基础篇）相关推荐

最新文章

热门文章