NuxtJS如何根据子组件开关变量状态动态设置页面title

核心思路 #

你当前用的是Nuxt.js框架自带的head方法配置页面元信息，head本身支持响应式数据绑定，只需要把开关状态从子组件同步到父页面，再关联到head的title配置即可，不需要手动调用head方法。

第一步：修改components/toggle.vue #

1. 补充props定义接收父组件传递的默认开关状态
2. 开关状态变化时通过事件把最新状态抛给父组件
   修改后的代码如下：

<template>
  <label for="toggle_button">
    <input type="checkbox" id="toggle_button" v-model="checkedValue"> toggle switch:
      <span v-if="isActive" class="toggle__label">On</span>
    <span v-if="!isActive" class="toggle__label">Off</span>
  </label>
</template>
<script>
export default {
  // 补充props定义
  props: {
    defaultState: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return { currentState: false }
  },
  computed: {
    isActive() {
      return this.currentState;
    },
    checkedValue: {
      get() {
        return this.defaultState
      },
      set(newValue) {
        this.currentState = newValue;
        // 新增：把最新状态抛给父组件
        this.$emit('toggle-change', newValue)
      }
    }
  }
}
</script>

第二步：修改pages/index.vue #

1. 新增响应式变量存储开关状态
2. 把head的title配置关联到该响应式变量
3. 调用toggle组件时绑定事件接收子组件的状态更新
   修改后的代码如下：

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      // 新增响应式变量存储开关状态
      isToggleOn: false
    }
  },
  head() {
    return {
      // 关联响应式变量动态切换标题
      title: this.isToggleOn ? '🥑 开关开启时的新标题' : '🥑 old and default title',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: '🥑 description goes here.'
        }
      ]
    }
  },
  methods: {
    // 新增：接收子组件传过来的开关状态
    handleToggleChange(val: boolean) {
      this.isToggleOn = val
    }
  }
})
</script>

同时要在index.vue的template里调用toggle组件的位置绑定事件：

<toggle @toggle-change="handleToggleChange" />

验证效果 #

开关切换时，子组件会把最新状态传给父页面，父页面的isToggleOn响应式变量更新后，head方法会自动重新执行，页面标题就会同步更新。

内容的提问来源于stack exchange，提问作者lechnerio