欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-13 12:38:04
基本是按照官网的 guide 全部梳理了一遍: 这里我们以一个 todo list 应用为例来把相关的只是都串起来,这篇里面的全部代码都在github上  ...

基本是按照官网的 guide 全部梳理了一遍: 这里我们以一个 todo list 应用为例来把相关的只是都串起来,这篇里面的全部代码都在github上

 vue 实例

一个 vue 应用是由一个 root vue instance 引导启动的,而 vue instance 是这么创建的:

var vm = new vue({
 // options
})

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

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

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

数据绑定

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

其中 v-* 都是 directive

例子:
<div v-bind:class="[classa, isb ? classb : '']">

 属性计算

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

var vm = new vue({
 el: '#example',
 data: {
 a: 1
 },
 computed: {
 // a computed getter
 b: function () {
 // `this` points to the vm instance
 return this.a + 1
 }
 }
})

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

表单

双向数据绑定:

<input type="text" v-model="message" placeholder="edit me">

<input type="checkbox" id="jack" value="jack" v-model="checkednames">

 ## 动画 动画的实现方式和 angular 以及 react 都是一样的,都是通过添加和删除 class 来实现的。 # component

组件的基本用法

component 的定义包括两部分:

1 创建component类:

var profile = vue.extend({
 template: "<div> lily </div>"
});

 2 注册一个 tagname:

vue.component("me-profile", profile);

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

 <div id="todo">
 <my-profile></my-profile>
 <form v-on:submit="add" v-on:submit.prevent>
 <input type="text" v-model="input"/>
 <input type="submit" value='add' />
 </form>
 ...
</div>

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

var vm = new vue({
 el: "#todo",
 components: {
 "my-profile": profile
 },
 ...
}

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

注意事项:

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

var mycomponent = vue.extend({
 data: function () {
 return { a: 1 }
 }
})

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

模板注意事项

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

<table>
 <tr is="my-component"></tr>
</table>

 props 传递数据

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

不同于 react,在 vue 中子组件需要先声明自己的 props 才行:

var profile = vue.extend({
 props: ["name"],
 template: `
 <h2>{{name}}'s todo list</h2>
 <h4>{{name}} is a good girl</h4>
 `
});

 然后我们可以在使用 profile 的时候这样传递参数:
<my-profile name='lily'></my-profile>

 这种是通过字面量传递参数,所以传递的值一定是字符串。还有一种方式是动态传参,通过 v-bind 来传递参数,可以双向绑定数据或者传非字符串参数:
<my-profile v-bind:name=‘input'></my-profile>

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

vue 还可以显式指定单向还是双向的数据绑定:

<!-- default, one-way-down binding -->
<child :msg="parentmsg"></child>

<!-- explicit two-way binding -->
<child :msg.sync="parentmsg"></child>

<!-- explicit one-time binding -->
<child :msg.once="parentmsg"></child>

 props 校验

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

var profile = vue.extend({
 input: {
 type: string
 }
});

 父子组件通信

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

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

我们把之前的todo list拆成不同的组件来实现,这样可以体验下如何进行组件的双向通信,我们拆分出两个组件,分别是 list 和 form 。

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

var form = vue.extend({
 props: {
 username: {
 type: string,
 default: "unnamed"
 }
 },
 data: function() {
 return {
 input: "",
 };
 },
 template: `
 <h1>{{username}}'s todo list</h1>
 <form v-on:submit="add" v-on:submit.prevent>
 <input type="text" v-model="input"/>
 <input type="submit" value='add' />
 </form>
 `,
 methods: {
 add: function() {
 this.$dispatch("add", this.input); //这里就是向父组件发送消息
 this.input = "";
 }
 }
});

 list 只负责展示列表和处理用户勾选操作,它接收到 add 消息之后会在自己上添加一个条目:

var list = vue.extend({
 template: `
 <ul>
 <li v-for='todo in list'>
 <label v-bind:class="{ done : todo.done }" >
  <input type="checkbox" v-model="todo.done"/>
  {{todo.title}}
 </label>
 </li>
 </ul>`,
 props: {
 initlist: {
 type: array
 }
 },
 data: function() {
 return {
 list: []
 }
 },
 events: {
 add: function(input) {
 if(!input) return false;
 this.list.unshift({
 title: input,
 done: false
 });
 }
 }
});

 然后,因为这是两个组件,当然需要一个 vue 实例来引导启动,我们的实例如下:

var vm = new vue({
 el: "#todo",
 components: {
 "todo-form": form,
 "todo-list": list
 },
 events: {
 add: function(input) {
 this.$broadcast("add", input);
 }
 }
});

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

html 代码就更简单了:

 <div id="todo">
 <todo-form username='lily'></todo-form>
 <todo-list></todo-list>
 </div>

 slot

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

动态切换组件

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

我们这里给 todo list 增加一个 about 页面。那么首先我们需要把 vm 改成一个组件,这个组件叫 todo,它就是整个 todo 页面:

var todo = vue.extend({
 template: `
 <div id="todo">
 <todo-form username='lily'></todo-form>
 <todo-list></todo-list>
 <slot>not show</slot>
 </div>
 `,
 components: {
 "todo-form": form,
 "todo-list": list
 },
 events: {
 add: function(input) {
 this.$broadcast("add", input);
 }
 }
});

 其实改动就第一行。

然后我们需要创建一个 about 组件:

var about = vue.extend({
 template: `
 <div id="about">
 <p>about todo list v0.1.0</p>
 <p>content here</p>
 </div>`
});

 接下来是重点了,我们要创建一个实例 vm,这vm要负责切换这两个页面:

var vm = new vue({
 el: "body",
 data: {
 currentview: "todo"
 },
 components: {
 "todo": todo,
 "about": about
 }
});

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

<component :is="currentview"></component>
 <ul>
 <li><label><input type="radio" name='page' value='todo' v-model='currentview'> home</label></li>
 <li><label><input type="radio" name='page' value='about' v-model='currentview'> about</label></li>
 </ul>

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

数据绑定的实现原理

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

异步更新机制

vue 对dom的更新是异步的! 这个异步是在一个异步队列中进行的,不过这个异步队列会在当前的 event loop 中执行完,所以如果修改了 data 立刻去dom中做查询操作是不对的,这个时候dom还没有更新,正确的做法是这样做:

vm.msg = 'new message' // change data
vm.$el.textcontent === 'new message' // false
vue.nexttick(function () {
 vm.$el.textcontent === 'new message' // true
})

 或者这样:

vm.$nexttick(function () {
 this.$el.textcontent === 'new message' // true
})

 花了半天时间才看完组件,下面应该去看一下另一个重点: directive

本文已被整理到了《vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。