元件化的思想實現 vue2.0 下對網頁標題(document.title)的更新

ycloud發表於2017-05-22
元件化Vue網頁

最近為了學習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元件


<template>
  <h1 v-if="false"><slot>請輸入標題內容</slot></h1>
</template>

<script>
export default {
  created () {
    this.updateTitle()
  },
  beforeUpdate () {
    this.updateTitle()
  },
  methods: {
    updateTitle () {
      let slots = this.$slots.default
      if (typeof slots === `undefined` ||
        slots.length < 1 ||
        typeof slots[0].text !== `string`) return
      let {text} = slots[0]
      let {title} = document
      if (text !== title) document.title = text
    }
  }
}
</script>

需要更新標題(document.title)的頁面或元件部分程式碼如下

<template>
  <div>
    <v-title>需要顯示的title</v-title>
    ...
  </div>
</template>
<script>
import VTitle from `...path/Title`
export default {
  components: {
    VTitle
  }
}
</script>

這樣就更像原生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

相關文章