组件化的思想实现 vue2.0 下对网页标题(document.title)的更新

最近为了学习react，用 vue 和 react 分别实现了 https://cnodejs.org/ 简易版

vue版本： https://share.la/cnodejs/vue
源码地址： https://github.com/ycloud/cno...

react版本：https://share.la/cnodejs/react/
源码地址： https://github.com/ycloud/cno...

其中react一切皆组件的思想受益良多。

现在回视之前的那篇 vue2.0 下对网页标题(document.title)更新的一种实现思路 的文章，虽然也可以实现，感觉不是特别优雅。

结合 vue的Slot 和 组件生命周期，用vue组件的方式实现如下：

title组件

需要更新标题(document.title)的页面或组件部分代码如下

这样就更像原生html的标签了。

demo演示
https://jsfiddle.net/ycloud/s...

react父子组件间通过props传递数据，实现就更简单

import { Component } from 'react'
class Title extends Component {
  componentWillMount() {
    this.updateTitle()
  }

  updateTitle(props) {
    const { children } = props || this.props
    const { title } = document
    if (children !== title) document.title = children
  }

  componentWillReceiveProps(nextProps) {
    this.updateTitle(nextProps)
  }

  render() {
    return null
  }
}

export default Title