用户登录

mixin,就是混合。混合可以混到组件里一些功能,全局混合可以混合到应用的所有组件里。下面我们一块儿创建一个混合,用它设置页面的标题。

现在所有页面的标题都是项目的名字,我想在页面组件里可以通过一个选项来设置页面的标题。

回到项目,找到这个内容列表页面的组件, src/post/index 下面的 post-index, 在组件里可以添加一个 title,用这个选项设置一下页面的标题,这个 title 可以是一个属性,也可以是一个方法,如果是方法的话,可以用这个方法返回要设置的页面标题的内容。

现在还没有效果,我们可以创建一个混合,在混合里获取到组件里的这个 title 属性,然后再去设置一下页面的标题。

应用配置

创建一个混合,放在 src/app 的下面,新建一个文件叫 app.mixin.ts。 页面标题里面可以包含一个应用的名字,打开项目根目录下的 .env.development,添加一个环境变量,名字叫 VUE_APP_APP_NAME,复制一下。再打开 .env.production,在这里也添加一个 VUE_APP_APP_NAME。

再打开应用的配置, app.config,在里面添加一个新的配置,导出这个配置,配置的名字叫 APP_NAME,它的值就是环境变量里的 VUE_APP_APP_NAME。

回到终端,重新运行一下项目的开发服务,先停止,然后再执行一下 serve 命令。

创建混合

再回到这个混合模块,在这里创建一个标题混合,导出一个东西,名字叫 titleMixin ,类型可以设置成 ComponentOptions。它的值是一个对象,里面可以添加组件的生命周期,比如 created ,在这个生命周期里,可以在控制台上输出点东西,比如 标题混合。

这个混合可以用在应用的全局,打开应用的入口,main.ts , 在创建了应用的下面,找个地方,用一下 app 上面的 mixin ,在全局应用一个混合。混合的名字叫 titleMixin。 编辑器自动帮我们从 app.mixin 里面导入了这个 titleMixin 。

在浏览器上观察一下控制台上输出的内容,你会发现,标题混合 这几个字输出了很多次。因为我们把 titleMixin 用在了应用的全局,应用里创建了每个组件之后都会输出这行文字。

回来继续再编辑一下这个标题混合,这里可以执行一个方法,名字是 setTitle,把 this 交给这个方法。 下面再添加一个 updated 生命周期,在这个方法里也执行一下 setTitle,把 this 交给它。

设置标题

然后在上面我们可以去定义一下这个设置页面标题用的方法,方法的名字叫 setTitle,方法接收一个 vm 参数,类型可以设置成 ComponentPublicInstance。

在方法里可以先获取到组件里的 title 选项。 把 title 从 vm 的 $options 里解构出来。 然后可以做一下判断,如果组件里有 title 这个选项。

先声明一个 titleContent ,然后继续做一下判断, typeof title 如果是 function ,因为这个 title 选项可能是个函数,如果是函数我们就让 titleContent 的值等于执行了这个函数之后返回的结果,title.call(vm)

不然的话,就让 titleContent 等于这个 title 选项的值。

下面再设置一下 document 里的 title 属性,这个属性的值就是页面的标题,让它等于 titleContent。 小横线,再加上应用的名字,APP_NAME,它是之前我们在应用的配置里添加的一个配置选项。

预览

再回到浏览器观察一下这个内容列表页面的标题,你会发现,这个页面的标题已经变成了内容列表了。打开内容列表里的一个内容页面。这个内容页面的标题也可以再设置一下。

在项目里找到页面对应的那个组件, src/post/show/post-show 这个组件,找到以后,在组件里添加一个 title ,它可以是一个属性也可以是一个方法,这里我们用一个方法。 方法里做一下判断,如果 showPost 是真的,就 return this.post.title ,用内容的 title 属性的值作为页面的标题。

在浏览器上观察一下这个内容页面的标题,你会发现这个标题就是内容的标题。 后面加上了应用的名字。

回到应用的首页,首页的标题可以特别处理一下,在这个 setTitle 方法里面,在这个判断 title 区块的外面,再做一下判断,如果 vm.$route.path 等于 / ,意思就是如果路由地址是应用的根,也就是应用的首页。我们可以直接把页面的标题设置成 APP_NAME 这个选项的值。

最后再到浏览器上观察一下,现在首页的页面标题就会是应用的名字。

Mixin:制作一个设置页面标题的混合《 Vue.js 前端应用 #12:应用架构 》

统计

13052
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点