深入探讨Vue.js组件和组件通信

Vue 前端之家
前端之家收集整理的这篇文章主要介绍了深入探讨Vue.js组件和组件通信，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_502_0@基本是按照官网的 Guide 全部梳理了一遍：<a rel="nofollow" target="_blank" href="http://vuejs.org/guide/index.html"&gt;http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的只是都串起来，这篇里面的全部代码都在github上 <a rel="nofollow" target="_blank" href="https://github.com/lihongxun945/vue-todolist"&gt;https://github.com/lihongxun945/vue-todolist

@H_502_0@

Vue 实例

@H_502_0@一个 Vue 应用是由一个 root vue instance 引导启动的，而 Vue instance 是这么创建的：

@H_502_0@一个 instance 实际上就是 MVVM 中的一个 VM。 传入的配置对象中data里的所有属性都会被挂载到 instance上，而为了避免命名冲突，Vue 内置方法都会以 $ 开头的属性挂载到 instance 上。

@H_502_0@instance 从创建到销毁会经历如下生命周期：

@H_502_0@在初始化的时候大致经过三步: •绑定数据监听，即对 data 的监听 •编译模板 •插入document或者替换对应dom # Vue 基本语法

@H_502_0@数据绑定

@H_502_0@Vue 使用的是一种 类 mastache 语法。常用绑定语法分这么几类： •mastache 语法，比如 {{ data }} {{ data | filter}} •v-bind 绑定属性，比如 v-bind: href,v-bind:class •v-on 绑定事件,比如 v-on:click,v-on:submit

@H_502_0@其中 v-* 都是 directive

@H_502_0@例子：
@H_502_0@属性计算

@H_502_0@Vue 支持一个很有意思的属性计算语法，可以指定一个属性由其他属性计算出来，这样就不用通过 $watch 来实现了：

@H_502_0@## 流程控制和列表相关的语法 包括 `v-if`,`v-show`,`v-else`,`v-for`

@H_502_0@表单

@H_502_0@双向数据绑定：

@H_502_0@ @H_502_0@Box" id="jack" value="Jack" v-model="checkedNames">

@H_502_0@## 动画 动画的实现方式和 Angular 以及 React 都是一样的，都是通过添加和删除 class 来实现的。 # Component

@H_502_0@组件的基本用法

@H_502_0@Component 的定义包括两部分：

@H_502_0@1 创建component类：

403_56@ Lily
" });
@H_502_0@2 注册一个 tagname：

@H_502_0@ @H_502_0@这样我们就可以通过 tagname 来使用这么组件了：

...
@H_502_0@Vue.component("me-profile",Profile); 属于全局注册，如果只是在某一个页面内使用，可以通过局部注册的方式：

@H_502_0@其中因为我们的 Vue 实例是绑定在 todo 元素上的，所以如果把 my-profile 放在这个元素外面是无效的，只有放在这个里面才会被 Vue 的这个实例引导初始化。

@H_502_0@

注意事项：

@H_502_0@Vue 构造函数可以传的参数基本都可以用在 Vue.extend 上，但是对 el 和 data 两个参数需要注意，为了避免不同实例间共享同一个对象，总是要通过 function 返回一个新的对象比较靠谱：

@H_502_0@因为参数都一样，其实他们俩就是同一个东西，不过一个是组件，一个是用来引导Vue启动的。

@H_502_0@

模板注意事项

@H_502_0@因为 Vue 就是原生的DOM，所以有些自定义标签可能不符合DOM标准，比如想在 table 中自定义一个 tr，如果直接插入 my-component 不符合规范，所以应该这样写：

@H_502_0@

Props 传递数据

@H_502_0@在 Vue 中每个组件都是独立的，不能也不应该直接访问父类的data。所以我们通过 props 来向子组件传递数据，是不是和 React 的方式很像？

@H_502_0@不同于 React，在 Vue 中子组件需要先声明自己的 props 才行：

{{name}}'s Todo List

{{name}} is a good girl

` });
@H_502_0@然后我们可以在使用 Profile 的时候这样传递参数：

@H_502_0@这种是通过字面量传递参数，所以传递的值一定是字符串。还有一种方式是动态传参，通过 v-bind 来传递参数，可以双向绑定数据或者传非字符串参数：

@H_502_0@v-bind 如果是一个字符串，则是绑定父组件的data中对应的字段，比如上面就是双向绑定了 input 的值。如果是一个数字则就是绑定了一个数字。

@H_502_0@Vue 还可以显式指定单向还是双向的数据绑定：

<child :msg.sync="parentMsg">

<child :msg.once="parentMsg">

@H_502_0@Props 校验

@H_502_0@一个好的组件总是应该先验证参数是否正确，另外可能还需要设置一些参数的默认值：

@H_502_0@

父子组件通信

@H_502_0@上面讲到的 props 其实就是父组件向子组件传递消息的一种方式。 在子组件中有一个 this.$parent 和 this.$root 可以用来方法父组件和根实例。不过，现在我们应该避免这么做。因为组件本身就是为了封装独立的逻辑，如果又去直接访问父组件的数据就破坏了组件的封装性。 所以我们应该还是应该通过父组件向子组件传递 props 的方式来通信。

@H_502_0@当然 props 其实只能做回调。在 React 中就探讨过这个问题，React 的做法就是通过 props 来做，传一个回调函数给子组件。其实我不是很喜欢这种把回调函数传来传去的方式，我更喜欢的是事件的方式。Vue 中子组件可以通过通过事件和父组件进行通信的。向父组件发消息是通过 this.$dispatch，而向子组件发送消息是通过 this.$boardcast，这里都是向所有的父亲和孩子发送消息，但是一旦执行一个回调之后就会停止，除非这个回调函数显式返回了 true。

@H_502_0@我们把之前的Todo List拆成不同的组件来实现，这样可以体验下如何进行组件的双向通信，我们拆分出两个组件，分别是 List 和 Form 。

@H_502_0@Form 负责处理用户输入，并在提交表单的时候向父组件发送一个 add 消息，代码如下:

{{username}}'s Todo List
`,methods: { add: function() { this.$dispatch("add",this.input); //这里就是向父组件发送消息 this.input = ""; } } });
@H_502_0@List 只负责展示列表和处理用户勾选操作，它接收到 add 消息之后会在自己上添加一个条目：

    • `,props: { initList: { type: Array } },data: function() { return { list: [] } },events: { add: function(input) { if(!input) return false; this.list.unshift({ title: input,done: false }); } } });
    @H_502_0@然后，因为这是两个组件，当然需要一个 Vue 实例来引导启动，我们的实例如下：

    @H_502_0@注意，其实 Form 和 List 在逻辑上是平级的组件，所以他们没有父子关系，他们共同都是 vm 的孩子。这里 vm 接到 Form 的消息之后会转发给 List。

    @H_502_0@html 代码就更简单了：

    @H_502_0@

    Slot

    @H_502_0@通过 Slot 可以实现把父组件渲染出来的HTML插入到子组件中，目前还不清楚什么时候会需要这样做，而且这么做对子组件的侵入性太大。

    @H_502_0@

    动态切换组件

    @H_502_0@这个功能感觉有点多余，感觉很多情况下我们应该是通过逻辑代码来实现切换，而不是通过Vue内置的动态组件来切换。不过用来实现一个类似 tab 切换的功能还是很方便的。

    @H_502_0@我们这里给 Todo List 增加一个 about 页面。那么首先我们需要把 vm 改成一个组件，这个组件叫 Todo，它就是整个 Todo 页面：

    not show
    `,input); } } });
    @H_502_0@其实改动就第一行。

    @H_502_0@然后我们需要创建一个 About 组件：

    502_0@About Todo List V0.1.0

    @H_502_0@Content here

    ` });
    @H_502_0@接下来是重点了，我们要创建一个实例 vm，这vm要负责切换这两个页面：

    @H_502_0@这里我们定义了一个 currentView 字段，当然可以是任意名称，然后通过特殊的 component 标签来进行组件切换：

    @H_502_0@上面的代码有两处需要注意： •通过 component这个特殊标签，然后用 :is 属性来进行组件的切换。 •radio 通过双向绑定来修改 currentView 字段，从而实现点击之后就可以进行切换。

    @H_502_0@

    数据绑定的实现原理

    @H_502_0@Vue 把双向绑定称作 reactive，可以翻译为响应式数据绑定。内部是通过 ES5 定义的 getter 和 setter 方法实现的，所以不支持 IE8 及以下浏览器，这种实现方式有两个容易犯错的地方： •如果在 data 上直接添加和删除属性是无法被检测到的，一般删除是不会的，但是可能会动态添加，这个时候应该通过 vm.$set(“name”,value) 的方式来添加。 •无法检测到对象内部的变化，也就是只能检测 data 的属性变化，如果 data.a 是一个对象，那么 data.a.b = 1 这种变化是无法被检测到的。这种情况下应该创建一个新的对象并赋值给 data.a 就行了。

    @H_502_0@

    异步更新机制

    @H_502_0@Vue 对DOM的更新是异步的！ 这个异步是在一个异步队列中进行的，不过这个异步队列会在当前的 Event Loop 中执行完，所以如果修改了 Data 立刻去DOM中做查询操作是不对的，这个时候DOM还没有更新，正确的做法是这样做：

    @H_502_0@或者这样：

    @H_502_0@花了半天时间才看完组件，下面应该去看一下另一个重点：

    本文已被整理到了《》，欢迎大家学习阅读。

    @H_502_0@以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

    组件组件组件

    猜你在找的Vue相关文章

    elementui的el-tree第一次加载无法展开和选中的问题
    问题现象 elmentui的el-tree数据加载问题，导致第一次加载选中当前节点和高亮当前节点没有...
    VSCODE打开一个文件，另一个文件就关闭的问题的解决方法
    因为刚打开文件，vscode默认是预览状态，如果编辑过之后，就不会有这个问题。 可以通过双击...
    一文带你学会国产加密算法SM4的vue实现方案
    前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下...
    解决vue报错：Module build failed (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js): TypeError: Cannot read property 'range' of null
    在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_esl...
    vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题
    问题产生 在使用babel编译es6时，遇到报错Uncaught ReferenceError: regeneratorRuntime i...
    element-UI中手动调用table排序
    &amp;lt;el-table :data=&amp;quot;tableData&amp;quot; &amp;quot;width...
    Vue双向绑定原理及其实现
    在之前面试的时候被面试官问到是否了解Vue双向绑定的原理，其实自己之前看过双向绑定的原理...
    Vue事件修饰符详解
    整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是...
    Vue-router插件使用
    单页面原理 Vue是单页面开发，即页面不刷新。 页面不刷新，而又要根据用户选择完成内容的更...
    Vue 分支循环
    v-for 通过v-for进行循环，不光可以拿到元素本身，也可以拿到索引值。 如果数据是对象类型...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作